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 ...
随机推荐
- Ubuntu下ss的安装与使用
不得不说,linux真的有种让人用上就爱上的魔力,正好最近Ubuntu出了16.04,便索性装了个win10+Ubuntu的双系统,也算是告慰那永远留在老硬盘里的虚拟机吧. 言归正传,换上Ubuntu ...
- root用户不能改动iptables
需求:因为防火墙做了IP和port限制,如今须要加入一条规则使之能够訪问指定的IP和port. vi /etc/sysconfig/iptables, 加入完毕后,wq保存,提示文件仅仅读无法保存.! ...
- Scrapy源代码分析-经常使用的爬虫类-CrawlSpider(三)
CrawlSpider classscrapy.contrib.spiders.CrawlSpider 爬取一般站点经常使用的spider.其定义了一些规则(rule)来提供跟进link的方便的机制. ...
- ueditor1.4.3在.net环境下的vs开发工具中集成经验
Ueditor是个非常不错的在线富文本编辑器,几个项目一直使用它.近期想更新版本号.发现新版1.4.3与旧版的部署方式全然不一样了.官网文档介绍的是直接放在iis下的部署说明,没有提到在vs开发工具中 ...
- 36岁IT老人再次随笔——程序员的门槛其实并不高,但却是一个易学难精的行当——IT的快车很快,我常看到不少人摔落下去,但又有不少身手敏捷的人跳了上来 good
36岁的我,还在IT里面留恋着技术.我不是什么技术牛人,只是不愿离开.搞硬件的朋友对我说:“我以为你是搞硬件的,没想到你软件方面这么厉害?”,搞软件的朋友对我说:“我以为你只是搞软件的,没想到你硬件方 ...
- luogu2431 正妹吃月饼
题目大意 求一个正整数集合\(K\),使得\(\sum_{k\in K}2^k\in[A,B]\),且\(|K|\)最大.\(A,B\)大小在long long范围内. 思路 \(\sum_{k\in ...
- python 网络通讯 服务器端代码demo,能够同时处理多个客户端的连接请求
这是一个python网络通讯服务器端的代码demo,能够同时处理多个客户端的连接请求. from socket import * import threading from datetime impo ...
- BZOJ 3991 set维护dfs序
思路: set按照dfn排序 两点之间的距离可以O(logn)算出来 加一个点-> now ans+=dis(pre,now)+dis(now,next)-dis(pre-next); 删一个点 ...
- ModelState对象
1.在控制器中判断Model验证结果
- oracle11g安装与拆卸
Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点'是' 3.下图后,选择创建和配置数 ...