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代码
Sep 07 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP基本语法总结
2014/09/06 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python画图的函数用法以及技巧
2019/06/28 Python
python之列表推导式的用法
2019/11/29 Python
python str字符串转uuid实例
2020/03/03 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
公司承诺书怎么写
2014/05/24 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
实习班主任自我评价
2015/03/11 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
我的收音机情缘
2022/04/05 无线电