网站首页 网站建设 IT知识 IT知识教程 多个vue子路由文件自动化合并的方法

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

2021-05-18 18:14:59

1. 目录结构

废话不多说，直接上图。

目录结构，如下图所示

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})

总结

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章

vue实现跳转接口push 转场动画示例
1.index.js配置子路由children。importVuefrom'vue'importRouterfrom'vue-router'importSing
对angular4子路由&辅助路由详解
子路由学习笔记：子路由和路由一样的配置方法，都是声明好路由的入口，路由的路径，路由的出口，不一样的是自路由是嵌套在副路由里面的并且由children表明这是子路
详解Nuxt内导航栏的两种实现方式
方式一|通过嵌套路由实现在pages页面根据nuxt的路由规则，建立页面1.创建文件目录及文件根据规则，如果要创建子路由，子路由的文件夹名字，必须和父路由名字相
华为子路由器一直闪怎么回事
子路由在使用过程中，指示灯变为闪烁，说明子路由与母路由之间有干扰，子路由无法扩展母路由Wi-Fi信号。确保子路由、母路由均插在墙上插座。或者更换其他墙上插座。子
vue路由传参的基本实现方式小结【三种方式】
本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考，具体如下：前言vue路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方

最新文章

载入进度条 效果
邮件发送简单例子-html文件
详解关于html，css，js三者的加载顺序问题
限制复选框的最大可选数
随鼠标上下滚动的jquery代码

hot 热门文章

python模拟登陆Tom邮箱示例分享
苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
蚂蚁森林节气签怎么领
华为mate30怎么更新系统？华为mate30更新手机系统教程
小米电视怎么下载斗鱼

猜你喜欢

JavaScript 命名空间 使用介绍
javascript ���名规则 变量命名规则
javascript 秒表计时器实现代码
Javascript 面向对象之重载
JavaScript 面向对象之命名空间
以上产品还未完全满足我的所有需求，在下方提交我的专属需求
我的专属需求：
*手机号：
*验证码：
img
咨询报价
现在咨询
img

在线咨询

建站在线咨询
img

获取方案

获取建站报价/方案

我们联系您img

img

微信咨询

扫一扫添加
动力姐姐微信
img
img

TOP

我们尽快联系您