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 jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
原生js+canvas实现验证码
Nov 29 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中错误处理操作实例分析
2019/08/23 PHP
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
面包屑导航详解
2017/12/07 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python docx库用法示例分析
2019/02/16 Python
django-allauth入门学习和使用详解
2019/07/03 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
法律六进活动方案
2014/03/13 职场文书
电力安全事故反思
2014/04/27 职场文书
防火标语大全
2014/10/06 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python如何查找列表中元素的位置
2022/05/30 Python