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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
layui select动态添加option的实例
Mar 07 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
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
程序员编程十条戒律
2009/07/09 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
理解JavaScript原型链
2016/10/25 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python基础教程之Filter使用方法
2017/01/17 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Django 多环境配置详解
2019/05/14 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
高考励志标语
2014/06/05 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
运动会通讯稿300字
2015/07/20 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python