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

前端  /  管理员 发布于 4年前   164

前言

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

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

注册需要

首先路由注册需要啥

// main.jsnew Vue({ el: '#app', router, store, components: { App }, template: ''})// 这里的 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 里面模块路由

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

// 配置 accoutReportexport 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.jsimport 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.jsimport { 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.jsimport { 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.jsimport 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 中注册

总结

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

您可能感兴趣的文章:

• vue2 中二级路由高亮问题及配置方法
• 使用vue-router为每个路由配置各自的title
• vue router 配置路由的方法
• vue动态路由配置及路由传参的方式
• 深入理解vue2.0路由如何配置问题
• 在vue-cli脚手架中配置一个vue-router前端路由
• 详解vue2路由vue-router配置（懒加载）
• vue新建项目并配置标准路由过程解析