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 事件小结 表格区别
Aug 13 Javascript
初学Javascript的一些总结
Nov 03 Javascript
js 文件引入实现代码
Apr 23 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
一个可复用的vue分页组件
May 15 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
jQuery实现视频展示效果
May 30 jQuery
微信公众号平台接口开发 获取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
用header 发送cookie的php代码
2007/03/16 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php三元运算符知识汇总
2015/07/02 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
一些mootools的学习资源
2010/02/07 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
详解Python yaml模块
2020/09/23 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
毕业生求职简历的自我评价
2013/10/07 职场文书
大学生村官个人总结
2015/02/15 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle