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
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
Vue slot用法(小结)
Oct 22 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python的turtle库使用详解
2019/05/10 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python构造IP报文实例
2020/05/05 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
2014年实习班主任工作总结
2014/11/08 职场文书
幼儿学前班评语
2014/12/29 职场文书
雷锋观后感
2015/06/10 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
初中政治教师教学反思
2016/02/23 职场文书