vue 动态添加路由 require.context()
之前的写法
'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()的更多相关文章
- vue 动态注册路由 require.context
需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件 ...
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...
- vue动态添加路由addRoutes之不能将动态路由存入缓存
在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...
- Vue页面权限控制和动态添加路由
原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
- vue-router 动态添加 路由
动态添加路由可以用了做权限管理.登录后服务器端返回权限菜单,前端动态添加路由 然后在设置菜单 1.vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则 ...
- vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
- 【面试题】Vue2动态添加路由 router.addRoute()
Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...
- vuex前端工程化之动态导入文件--require.context( )
随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...
随机推荐
- ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧
这里藏的配置确实多.. 慢慢实践吧. <!DOCTYPE html> <html> <head> <title>ExtJs</title> ...
- 【ACM】nyoj_139_我排第几个_201308062046
我排第几个时间限制:1000 ms | 内存限制:65535 KB 难度:3描述 现在有"abcdefghijkl”12个字符,将其所有的排列中按字典序排列,给出任意一种排列,说出这个排 ...
- DLR概念
参考文章 动态语言运行时(Dynamic Language Runtime,DLR)是一套基于.NET的类库,它的作用是简化在CLR上开发动态语言的工作,例如DLR中提供了表达式树的创建,代码生成.优 ...
- 【高级算法】禁忌搜索算法解决3SAT问题(C++实现)
转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46440389 近期梳理,翻出了当年高级算法课程做的题目.禁忌搜索算法解决3SAT问 ...
- matplotlib的cmap
今天又看到了这样的代码: plt.imshow(X_train[0], cmap=plt.get_cmap('PuBuGn_r')) #plt.imshow(X_train[0], cmap=plt. ...
- HTTP详解工作原理
1. HTTP简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少. ...
- Java面试-Struts2
1 Struts2工作原理 一个请求在Struts2框架中的处理大概分为下面几个步骤: 1.client初始化一个指向Servlet容器(比如Tomcat)的请求: 2.这个请求经过一系列的过滤器( ...
- php模版静态化原理
看了一些开源系统的,简单的总结一下php的模板及静态原理. 先贴代码,再做解释. index.php <?php //如果已存在静态页面,直接读取并显示 if(file_exists('inde ...
- x64汇编第三讲,64位调用约定与函数传参.
目录 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 二丶x64汇编 2.1汇编详解 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 在x86下我们汇编的传参如下: ...
- BZOJ 1018 线段树维护图的连通性问题
思路: 我们可以搞一棵线段树 对于一段区间有6种情况需要讨论 左上右下.左上右上.左下右下.左下右上 这四种比较好维护 用左上右下举个例子吧 就是左儿子的左上右下&左区间到右区间下面有路&am ...