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


Posted in Javascript onAugust 14, 2019

前言

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

分享两个解决方案 —— 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

例如

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

然后配置 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 // 路由配置出口文件

例如

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

模块 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 中注册

总结

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

Javascript 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
详解JavaScript 作用域
Jul 14 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 #Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 #Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 #Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 #Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 #Javascript
vue源码nextTick使用及原理解析
Aug 13 #Javascript
封装微信小程序http拦截器过程解析
Aug 13 #Javascript
You might like
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Anaconda入门使用总结
2018/04/05 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python实现ATM系统
2020/02/17 Python
python3 logging日志封装实例
2020/04/08 Python
django和flask哪个值得研究学习
2020/07/31 Python
简历自荐信
2013/12/02 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
体育教师求职信
2014/06/30 职场文书
化工见习报告范文
2014/10/31 职场文书
四群教育工作总结
2015/08/10 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python