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

前言

企业运营后台页面很多，路由如若不区分模块化配置，所有路由挤在同一个文件将不好维护，所以路由的配置也要模块化

分享两个解决方案 —— Vue 路由配置的模块化（Plan A and Plan B）

注册需要

首先路由注册需要啥

// main.js
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})
// 这里的 router 是这样的
export default new Router({
 mode: 'history',
 routes: [],
 ... // 其他配置
})

也就是说注册需要 new 一个 Router 实例，实例里的 routes 是数组，里面配置每个页面的路由

模块拆分（Plan A）

src 下 router 的目录结构

—src
—-router
——modules
——–xxxx.js // 模块 xxx
——–other.js // 模块 other
——index.js // 路由配置入口和出口 index

例如

然后配置 modules 里面模块路由

// 配置 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

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from '@/views/Layouts.vue'								 
 1/3    1 2 3 下一页 尾页