之前的写法

'use strict'
import Vue from 'vue'
import MessageBroadcast from 'page/MessageBroadcast'
import Survey from 'page/Survey'
import MessageFingure from 'page/MessageFingure'
import InterfaceMonitor from 'page/InterfaceMonitor'
import PowerDivisioin from 'page/PowerDivisioin'
import ApiInfo from 'page/ApiInfo'
import UserInfo from 'page/UserInfo'
import CodeTable from 'page/CodeTable'
import PowerToMe from 'page/PowerToMe'
import MessageConfig from 'page/MessageConfig' Vue.component('MessageBroadcast', MessageBroadcast)
Vue.component('Survey', Survey)
Vue.component('MessageFingure', MessageFingure)
Vue.component('InterfaceMonitor', InterfaceMonitor)
Vue.component('PowerDivisioin', PowerDivisioin)
Vue.component('ApiInfo', ApiInfo)
Vue.component('UserInfo', UserInfo)
Vue.component('CodeTable', CodeTable)
Vue.component('PowerToMe', PowerToMe)
Vue.component('MessageConfig', MessageConfig)

今天刚搞明白 如何通过webpack 去动态加载路由

网上有很多方法,但是挺多都不好用,所以我把自己成功实现的 贴出来。

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

参数说明:

   1. 你要引入文件的目录

2.是否要查找该目录下的子级目录

3.匹配要引入的文件

返回:
       1. context.require 返回一个require 函数:

  function webpackContext(req) {
    return __webpack_require__(webpackContextResolve(req));
  }
    2. 改函数有三个属性:resolve 、keys、id

· resolve: 是一个函数,他返回的是被解析模块的id

· keys: 也是一个函数,他返回的是一个数组,该数组是由所有可能被上下文模块解析的请求对象组成

· id:上下文模块的id

import Vue from 'vue'
function capitalizeFirstLetter(str) {
return str.charAt().toUpperCase() + str.slice()
}
function validateFileName(str) {
return /^\S+\.vue$/.test(str) &&
str.replace(/^\S+\/(\w+)\.vue$/, (rs, $) => capitalizeFirstLetter($))
}
const requireComponent = require.context('./', true, /\.vue$/)
requireComponent.keys().forEach(filePath => {
const componentConfig = requireComponent(filePath)
const fileName = validateFileName(filePath)
const componentName = fileName.toLowerCase() === 'index'
? capitalizeFirstLetter(componentConfig.default.name)
: fileName
Vue.component(componentName, componentConfig.default || componentConfig)
})

实现效果,

成功的动态加载了 Page文件夹下面所有的名为index.vue的组件

vue 动态添加路由 require.context()的更多相关文章

  1. vue 动态注册路由 require.context

    需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件 ...

  2. vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  3. vue动态添加路由addRoutes之不能将动态路由存入缓存

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...

  4. Vue页面权限控制和动态添加路由

    原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...

  5. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

  6. vue-router 动态添加 路由

    动态添加路由可以用了做权限管理.登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单 1.vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则 ...

  7. vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏

    这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...

  8. 【面试题】Vue2动态添加路由 router.addRoute()

    Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...

  9. vuex前端工程化之动态导入文件--require.context( )

    随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...

随机推荐

  1. 百度之星2014复赛 - 1001 - Find Numbers

    先上题目: Find Numbers Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  2. Ajax跨域访问的问题

    在本机调试Ajax的时候如果服务器在另外的网址,Chrome会出现 Origin  is not allowed by Access-Control-Allow-Origin. 解决方案是禁用Chro ...

  3. 11gR2 集群(CRS/GRID)新功能—— SCAN(Single Client Access Name)

    https://blogs.oracle.com/database4cn/11gr2-crsgrid-scansingle-client-access-name

  4. ExpressionTreeVisualizer

    看表达式的工具,这个工具后来微软不更新了,只支持到VS2013 表达式树的语法难度太大,语法和实现难度都大 相关文章 github地址

  5. Java-基本输入输出

    Scanner sc = new Scanner(System.in); System.out.println("Please input the path:"); String ...

  6. 多人即时战斗游戏服务端系列[2]--90坦克Online游戏对象介绍以及渲染机制

    先上类图,略大,点击此处放大: 1.先说下方接口 1.1 场景物品接口 ISceneObject : OpLog.IOpItem, IStackPoolObject 全部场景对象的基本接口,包含类型定 ...

  7. JS垃圾回收——和其他语言一样,JavaScript 的 GC 策略也无法避免一个问题:GC 时,停止响应其他操作,这是为了安全考虑

    JavaScript 内存管理 & 垃圾回收机制 标记清除 js 中最常用的垃圾回收方式就是标记清除.当变量进入环境时,例如,在函数中声明一个变量,就将这个而变量标记为“进入环境”.从逻辑上讲 ...

  8. Node.js:事件循环

    ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...

  9. 关于Spring中的<context:annotation-config/>配置作用

    转自:https://www.cnblogs.com/iuranus/archive/2012/07/19/2599084.html 当我们需要使用BeanPostProcessor时,直接在Spri ...

  10. Python关于super()函数的理解

    看下面的例子: class A: def __init__(self, name): self.name = name def bb(self): print('没事就爱瞎BB') class B(A ...