vue 自动化路由实现代码


Posted in Javascript onSeptember 03, 2019

1.需求描述

在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由。为此我们在项目中会专门的一个文件夹来管理路由,如下图所示

vue 自动化路由实现代码

那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由。特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue,分别对应的事列表页,详情页和编辑页。

vue 自动化路由实现代码

上图是我们的文件目录,views文件夹中存放的是所有的页面,goodsPlanning是一级目录,onNewComplete和thirdGoods是二级目录,二级目录中存放的是具体的页面,indexComponents中存放的是index.vue的文件,editComponents也是同样的道理。index.vue对应的路由是/goodsPlanning/onNewComplete, edit.vue对应的路由是/goodsPlanning/onNewComplete/edit,detail.vue也是同样的道理。所以我们的文件夹和路由是完全能够对应上的,只要知道路由,就能很快的找到对应的文件。那么有没有办法能够读取我们二级目录下的所有文件,然后根据文件名来生成路由呢?答案是有的

2. require.context介绍

官方文档require.context

简单说就是:有了require.context,我们可以得到指定文件夹下的所有文件

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

require.context有三个参数:

  • directory:说明需要检索的目录
  • useSubdirectories:是否检索子目录
  • regExp: 匹配文件的正则表达式

require.context()的返回值,有一个keys方法,返回的是个数组

let routers = require.context('VIEWS', true).keys()
console.log(routers)

vue 自动化路由实现代码

通过上面的代码,我们打印出了所有的views文件夹下的所有文件和文件夹,我们只要写好正则就能找到我们所需要的文件

3.直接上代码

import Layout from 'VIEWS/layout/index'
/**
 * 正则 首先匹配./ ,然后一级目录,不包含components的二级目录,以.vue结尾的三级目录
 */
let routers = require.context('VIEWS', true, /\.\/[a-z]+\/(?!components)[a-z]+\/[a-z]+\.vue$/i).keys()
let indexRouterMap = {} // 用来存储以index.vue结尾的文件,因为index.vue是列表文件,需要加入layout(我们的菜单),需要keepAlive,需要做权限判断
let detailRouterArr = [] // 用来存储以非index.vue结尾的vue文件,此类目前不需要layout
routers.forEach(item => {
 const paths = item.match(/[a-zA-Z]+/g) //paths中存储了一个目录,二级目录,文件名
 const routerChild = { //定义路由对象
  path: paths[1],   
  name: `${paths[0]}${_.upperFirst(paths[1])}`,  //upperFirst,lodash 首字母大写方法
  component(resolve) {
   require([`../../views${item.slice(1)}`], resolve)
  },
 }
 if (/index\.vue$/.test(item)) { //判断是否以index。vue结尾
  if (indexRouterMap[paths[0]]) {  //判断一级路由是否存在,存在push二级路由,不存在则新建
   indexRouterMap[paths[0]].children.push(routerChild)
  } else {
   indexRouterMap[paths[0]] = {
    path: '/' + paths[0],
    component: Layout,
    children: [routerChild]
   }
  }
 } else {   //不以index.vue结尾的,直接添加到路由中
  detailRouterArr.push({
   path: item.slice(1, -4),  //渠道最前面的 . 和最后的.vue
   name: `${paths[0]}${_.upperFirst(paths[1])}${_.upperFirst(paths[2])}`,
   component(resolve) {
    require([`../../views${item.slice(1)}`], resolve)
   },
   meta: {
    noCache: true,  //不keepAlive
    noVerify: true  //不做权限验证
   }
  })
 }
})
export default [
 ...Object.values(indexRouterMap),
 ...detailRouterArr,
 /**
  * dashboard单独处理下
  */
 {
  path: '',
  component: Layout,
  redirect: 'dashboard',
  children: [
   {
    path: 'dashboard',
    component: () => import('VIEWS/dashboard/index'),
    name: 'dashboard',
    meta: { title: '首页', noCache: true, noVerify: true }
   }
  ]
 },
]

简简单单的几十行代码就实现了所有的路由功能,再也不用一行一行的写路由文件了。可能你的文件管理方式和我的不一样,但是只要稍微改改正则就行了。

4. 注意

  1. 不能用import引入路由,因为用import引入不支持变量
  2. 不能用别名,找了半天问题,才知道用变量时也不能用别名,所以我用的都是相对路径

5.好处

  • 不用在添加路由了,这个就不说了,明眼人都看得出来
  • 知道了路由,一个能找到对应的文件,以前我们团队就出现过,乱写path的情况
  • 更好的控制验证和keepAlive

总结

以上所述是小编给大家介绍的vue 自动化路由实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue中npm包全局安装和局部安装过程
Sep 03 #Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 #Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 #Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
js tab栏切换代码实例解析
Sep 03 #Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 #Javascript
You might like
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js实现表格字段排序
2014/02/19 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
python多线程操作实例
2014/11/21 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python面向对象特殊成员
2017/04/24 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python实现简单日期工具类
2019/04/24 Python
Python类如何定义私有变量
2020/02/03 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
浅谈Python __init__.py的作用
2020/10/28 Python
俄罗斯游戏商店:Buka
2020/03/01 全球购物
乡镇干部十八大感言
2014/02/17 职场文书
实习协议书范本
2014/04/22 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
天坛导游词
2015/02/02 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
庆七一主持词
2015/06/29 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS