Vue路由模块化配置的完整步骤
前言
企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化
分享两个解决方案 —— 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
例如
然后配置 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 // 路由配置出口文件
例如
模块 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 中注册
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
- mysql主从同步(5)-同步延迟状态考量(seconds_behind_master和pt-heartbea)
- ngx_pagespeed-nginx前端优化模块介绍
- Tomcat利用MSM实现Session共享方案解说
- Tomcat集群环境下session共享方案梳理(1)-通过memcached(MSM)方法实现
- nginx负载均衡(5种方式)、rewrite重写规则及多server反代配置梳理
- python常用知识梳理
- 如何打击“假货、高仿”类小程序
- centos 6x系统下源码安装mysql操作记录
- 【3】利用Word模板生成文档的总结
- 【2】快速代码集的由来及概览
- silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
- Silverlight数据绑定/IValueConverter学习笔记
- silverlight:DeepZoom版的图片局部放大效果
- Linq之ToDictionary<TSource, TKey, TElement>的写法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- WebSocket三问—腾讯三问
- BroadcastReceiver三问—美团真题
- 小程序调用拍照功能
- Jetpack中可能被你忽视的—行为组件简析
- pytest封神之路第零步 快速入门
- beego(一) beego 入门
- javascript预编译(执行期的上下文)
- Elasticsearch评分相关度算法解析
- Netty入门教程——认识Netty
- Linux下的包过滤软件:iptables剖析
- rxjs fromEvent的实现
- rxjs switchMap的实现原理
- rxjs里scan operator的执行研究
- rxjs pipe和map组合的一个实际例子的单步调试
- Win10+Python2.7.14+cocos2d-x-3.17.2+VS2017环境搭建