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

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

总结

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

赞 (0)

相关推荐

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

  • vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法

    最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有导航栏,所以这种方式不可行,后来我真的使出了浑身解数,去MuseUI作者GitHub上面提问,无果,去segmentfault上面提问,无果,去vue官方群提问,无果,在提问之前,我都是经过一番搜索,思考的,但是这些都让我崩溃了.可能出错的地方从路由URL,museUI的

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

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

    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(

  • vue下载excel文件的四种方法实例

    目录 1.通过url下载 2.通过 a 标签 download 属性结合 blob 构造函数下载 3.通过 js-file-download 插件 4.使用fetch下载 总结 1.通过url下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_b

  • Vue路由的模块自动化与统一加载实现

    首先呢,我们来看看一般项目路由是怎么划分的. 为什么这么划分呢?如果大项目业务非常多,单纯的单页面很难维护,我们只有这样规范化,才能高效率. 模块自动化与统一加载的好处: 规范化命名(模块名.业务名.vue) 不用每次写页面都要去总路由引入组件 接下来,我们实战一波. 一.建立项目文件目录以及文件夹 根据上面的要求建立,依次在src文件夹下的components文件夹下建立一个如名叫model1文件夹用于存放功能模块(可以分别创建多个模块文件夹,里面分别存放业务代码).在该文件夹下创建compo

  • vue路由分文件拆分管理详解

    这里说的路由拆分指的是将路由的文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发.具体要不要拆分,那就要视你的项目情况来定了,如果项目较小的话,也就一二十个路由,那么是拆分是非常没必要的.但倘若你开发一些功能点较多的商城项目,路由可以会有一百甚至几百个,那么此时将路由文件进行拆分是很有必要的.不然,你看着index.js文件中一大长串串串串串串的路由,也是很糟糕的. 首先我们在router文件夹中创建一个index.js作为路由的入口文件,然后新建一个modules文件夹,里面存放各

  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

  • vue中用H5实现文件上传的方法实例代码

    整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def

  • Python实现分割文件及合并文件的方法

    本文实例讲述了Python实现分割文件及合并文件的方法.分享给大家供大家参考.具体如下: 分割文件split.py如下: #!/usr/bin/python ########################################################################## # split a file into a set of parts; join.py puts them back together; # this is a customizable ve

  • java 实现切割文件和合并文件的功能

    java 实现切割文件和合并文件的功能 一.切割文件代码如下: 需求:将一个媒体文件切割成多个碎片(每个碎片的大小为1M),并添加配置说明文件 1.创建(指定)一个文件夹,用于保存切割出来的碎片           2.创建源文件对象,并传入一个输入流对象           3.创建一个缓冲区为1M           4.创建一个输入流对象并将源文件对象传入,创建一个输出流对象引用           5.每个缓冲区获取到碎片时,使用输出对应流对象写入到一个新的文件           6.

  • C#文件合并的方法

    本文实例讲述了C#文件合并的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.IO; string filetomerge=@"C:\temp\data.bin"; string targetpath=@"D:\store"; string strFileName = filetomerge.Substring(filetomerge.LastIndexOf(Path.DirectorySeparatorChar)

  • C#合并多种格式文件为PDF的方法

    C#合并多种格式文件为PDF的方法

    文档合并是一种高效文档处理方式.如果能够有一个方法能将多种不同类型的文档合并成一种文档格式,那么在文档存储管理上将为我们提供极大的便利.因此,本篇文章介绍了一种如何使用免费组件Free Spire.Office for .NET来实现将多种各式的文档合并为PDF的方法.本方法中可合并的文档格式可以是doc.docx.xls.xlsx.pdf等.下面将进行详细阐述. 使用方法:安装Free Spire.Office for .NET后,添加引用spire.doc.dll, spire.xls.dl

随机推荐