Vue【八】路由vue-router的封装

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')