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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
js异常捕获方法介绍
Apr 10 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
JS代码实现页面切换效果
Jan 10 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
js继承实现方法详解
2016/12/16 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python匿名函数用法实例分析
2019/08/03 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
优秀管理者获奖感言
2014/02/17 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
pytorch实现ResNet结构的实例代码
2021/05/17 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
使用Python开发冰球小游戏
2022/04/30 Python
MySQL 原理与优化之Update 优化
2022/08/14 MySQL