多个vue子路由文件自动化合并的方法


Posted in Javascript onSeptember 03, 2019

1. 目录结构

废话不多说,直接上图。

目录结构,如下图所示

多个vue子路由文件自动化合并的方法

2. 代码编写位置

在router目录下面的index.js文件中写入以下代码

import Vue from 'vue'
import Router from 'vue-router'
   
Vue.use(Router)
   
let routes = []
   
const routerContext = require.context('./', true, /index\.js$/)
   
routerContext.keys().forEach(route => {
 // 如果是根目录的 index.js、 不做任何处理   
 if (route.startsWith('./index')) {
  return
 }     
 const routerModule = routerContext(route)   
 // 兼容 import export 和 require module.export 两种规范 Es modules commonjs
 routes = [...routes, ...(routerModule.default || routerModule)]  
})
     
export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: routes
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
原生js生成图片验证码
Oct 11 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 #Javascript
vue 自动化路由实现代码
Sep 03 #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
You might like
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JavaScript继承方式实例
2010/10/29 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
jquery实现图片预加载
2015/12/25 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
Python容器类型公共方法总结
2020/08/19 Python
Python用SSH连接到网络设备
2021/02/18 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
制冷与电控专业应届生求职信
2013/11/11 职场文书
小学后勤管理制度
2014/01/14 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书