Vue路由模块化配置的完整步骤

// main.js

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

// 这里的 router 是这样的
export default new Router({
 mode: 'history',
 routes: [],
 ... // 其他配置
})

// 配置 other
import err from '@/views/others/Error.vue'
export default function(router) {
 router.push({
  path: '/error',
  name: 'error',
  component: err
 })
}

// 配置 accoutReport
export default function(router) {
 router.push({
  path: '/accout-report',
  redirect: '/accout-report/list'
 })
 // 列表
 router.push({
  path: '/accout-report/list',
  name: 'list',
  component: () => import('@/views/accoutReport/List.vue')
 })
 // 新增
 router.push({
  path: '/accout-report/create',
  name: 'create',
  component: () => import('@/views/accoutReport/Create.vue')
 })
 // 编辑
 router.push({
  path: '/accout-report/edit/:id',
  name: 'edit',
  component: () => import('@/views/accoutReport/steps/CreateStep2.vue')
 })
 // 详情
 router.push({
  path: '/accout-report/detail/:id',
  name: 'detail',
  component: () => import('@/views/accoutReport/Detail.vue')
 })
}

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from '@/views/Layouts.vue'
import otherRouter from '@/router/modules/others'
import accoutReport from '@/router/modules/accoutReport'
// import store from '@/stores'
Vue.use(Router)

let routes = []

let rootRouter = {
 path: '/',
 component: App,
 children: [],
 redirect: '/accout-report/list'
}

let redirectRouter = {
 path: '*',
 redirect: '/error'
}

otherRouter(rootRouter.children)
accoutReport(rootRouter.children)
// 如有多个模块，依次在这里配置

const router = new Router({
 mode: 'history',
 routes: routes.concat([rootRouter, redirectRouter])
})
export default router

// order.js
import { getFindBusinessServiceList } from '@/utils/config-utils'

const OrderRouter = [
 {
  path: '/',
  redirect: '/cost/order-list'
 },
 {
  path: '/cost',
  component: () => import('@/views/Layouts'),
  redirect: '/cost/order-list',
  children: [
   {
    path: 'order-list',
    component: () => import('@/views/orderManagement/List'),
    beforeEnter: async (to, from, next) => {
     await getFindBusinessServiceList() // 进入该路由前异步请求，结束后进入该路由
     next()
    }
   },
   {
    path: 'order-detail',
    component: () => import('@/views/orderManagement/Detail')
   },
   // 下面是重定向，可不配置
   {
    path: 'orderDetail',
    redirect: 'order-detail'
   },
   {
    path: 'order',
    redirect: 'order-list'
   }
  ]
 }
]
export default OrderRouter

// index.js
import { camelCase } from 'lodash-es'
const requiredModules = require.context('./modules', false, /\.js$/)
const routers = {}

requiredModules.keys().forEach(fileName => {
 // 不加载index.js
 if (fileName === './index.js') return
 // 转为驼峰命名
 const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ''))

 routers[moduleName] =
  requiredModules(fileName).default || requiredModules(fileName)
})
export default routers

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import routers from '@/routers/index'
Vue.use(Router)
let routes = []
Object.values(routers).forEach(router => {
 routes.push(...router)
})

export default new Router({
 mode: 'history',
 routes
})