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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
Zerg基本策略
2020/03/14 星际争霸
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
PHP自动生成月历代码
2006/10/09 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php中cookie的使用方法
2014/03/29 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
javascript中的delete使用详解
2013/04/11 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python中的self用法详解
2019/08/06 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
animation和transition的区别
2020/10/12 HTML / CSS
土木工程专业大学毕业生求职信
2013/10/13 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
党支部对照检查材料
2014/08/25 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS