您现在的位置是:首页 >技术交流 >vue脚手架:路由的配置和使用网站首页技术交流
vue脚手架:路由的配置和使用
简介vue脚手架:路由的配置和使用
一、路由的配置和使用
1、引入router
- 在创建项目的时候可以默认用Vue脚手架中的自动生成路由文件
- 或者自己下载(注意vue和vue-router版本的对应关系)
2、创建路由组件并引入:
- 在views文件夹中创建2个.vue文件作为路由组件:
- 引入路由组件:
在router文件夹下的index.js中引入2个路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'
3、将路由与组件进行映射
4、创建router实例,传入router配置
// 创建router实例,传入router配置
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
5、将router实例对外进行暴露
// 将router实例对外进行暴露
export default router
6、 将router挂载到根节点上
7、设置路由出口
将路由匹配到的组件渲染到对应的位置
<router-view></router-view>
二、过程中遇到的问题
(欸2个不起眼又愚蠢的小错误花费了我不少时间!!!)
1、配置路由后没效果
配置完路由并运行项目后,代码没有报任何错误,但是路由对应的效果没有显示出来。后面仔细核对了网上成功的一些例子,发现居然是component单词拼错了,缺少了一个字母,导致代码没有报错但是路由效果也没出来。
2、配置子路由后没效果
后面跟着教程试了一下子路由,发现父级路由效果出来了,但是子路由效果没有出来。后面发现子路由的关键字children首字母要小写,而我弄成大写的了,改过来之后,效果和页面均正常。
3、其他
- router文件夹下的index.js代码:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
// 将路由与组件进行映射
const routes = [
// 主路由
{
path:'/',
component: Main,
// 子路由
children:[
{path:'home', component: Home},
{path:'user', component: User}
]
}
]
// 创建router实例,传入router配置
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 将router实例对外进行暴露
export default router
- main.js代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI);
// 将实例挂载到根节点上
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。