Vue【八】路由vue-router的封装
前言
把路由配置都写在main.js
中会显的特别乱,小项目还好,大项目就会看的眼花缭乱,因此,在开发中常把路由单独封装起来,然后再main.js
中导入。
一、路由封装
- 在src下新建router文件夹,然后再文件夹下新建index.js文件。 目录结构:src/router/index.js
// 必须要导入vue,在main中导入的vue在这使用不了
import Vue from 'vue'
// 2. 导入VueRouter
import VueRouter from 'vue-router'
import Your from '../views/Your'
import My from '../views/My'
import It from '../views/It'
// 3. 使用vue插件 vue的插件想要生效必须调用一个方法 Vue.use(XXXX)
Vue.use(VueRouter)
// 4. 创建一个路由对象
const router = new VueRouter({
// 路由的规则
// route: 一条路由规则
routes: [
{
// 路径 锚点
// 组件
path: '/your ',
component: Your ,
},
{
path: '/my',
component: My,
},
{
path: '/it ',
component: It ,
},
],
})
//导出
export default router
二、导入路由
把上面封装好的路由在main.js
中导入
import router from './router'
new Vue({
// 5. 关联路由对象和vue实例 data methods
render: (h) => h(App),
router,
}).$mount('#app')