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

上述代码，除了 other，所有页面路由配置在 rootrouter 的 children 下面，有一个父级 router 包裹着
代码都看得懂，这里就不多说哈~

最后在 main.js 中注册

模块拆分（plan b）

该方法较为难懂一些，可以看看

目录结构跟 plan a 类似，不过在 src 下多了一个 router.js 配置文件作为路由出口文件

src 下 router 的目录结构

---src
----router
------modules
--------xxxx.js // 模块 xxx
--------other.js // 模块 other
------index.js // 路由配置中转文件
----router.js // 路由配置出口文件

例如

模块 modules 里文件配置

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

上述路由配置在 layouts 路由下的 children

接下来关键，路由配置中转文件 index.js

遍历 modules 文件夹下的每个模块文件，赋值和导出

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

然后在 src 下的出口文件 router.js 包装

// 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
})

最后在 main.js 中注册

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。