多个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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
javascript 面向对象继承
2009/11/26 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
微信小程序如何实现全局重新加载
2019/06/05 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
对python3新增的byte类型详解
2018/12/04 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python中的yield from语法快速学习
2020/11/06 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
大型晚会策划方案
2014/02/06 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
年度评优评先方案
2014/06/03 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
团委工作总结2015
2015/04/02 职场文书
员工升职自我评价
2019/03/26 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
python xlwt模块的使用解析
2021/04/13 Python