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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
浅谈vue权限管理实现及流程
Apr 23 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面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Python性能优化技巧
2015/03/09 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python @property装饰器原理解析
2020/01/22 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
离婚财产分配协议书
2014/10/21 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers