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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
小程序:授权、登录、session_key、unionId的详解
May 15 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
canvas知识总结
2017/01/25 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
小学门卫岗位职责
2013/12/17 职场文书
高二生物教学反思
2014/01/27 职场文书
科级干部考察材料
2014/02/15 职场文书
如何写自我鉴定
2014/03/19 职场文书
《凡卡》教学反思
2014/04/09 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
商业项目策划方案
2014/06/05 职场文书
学生退学证明
2015/06/23 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
数据库连接池
2021/04/06 MySQL
快速学习Oracle触发器和游标
2021/06/30 Oracle
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript