vue中路由的封装

在router中放两个文件

两个文件分别是：config.js 和 homeModule.js

homeModule.js:

import router from "./config"

const homeMoudule = [
    router.home,
    router.about
]
export default homeMoudule

config.js:

import Home from '../views/Home.vue'

const router = {
    home:{
        path:'/',
        name:'Home',
        component:Home
    },
    about:{
        path:"/about",
        name:"About",
        component:() => import('../views/About.vue')
    }
}

export default router

index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import homeModule from "./homeModule"

Vue.use(VueRouter)

  const routes = [
  ...homeModule
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

import routerConfig from './router/config'

Vue.prototype.$routerConfig = routerConfig

组件中：

goAbout(){
      this.$router.push(this.$routerConfig.about.path)
    }