需求场景：
在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自动读取文件夹下的文件进行路由注册。
借鉴思路：
参考vue的功能基础组件的自动化全局注册，看到一个require.context方法，可以读取某个文件夹下的文件信息。因此考虑，使用这个方法，获取views文件夹下的.vue页面，文件夹名称作为路由名称
require.context的使用介绍：
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
页面代码：
如下图示，views文件夹下的内容，都需要进行路由注册。
文件的路径有2种，（1）简单的vue功能页面，直接挂在views文件夹下；（2）复杂的页面，在views下在新建文件夹进行处理。
目前需要自动注册的路由页面，是针对“直接挂在views文件夹”下的页面。（因为views下的二级页面，暂时没有想到好的方案）
router/index.js页面代码
心路历程：
（1）一开始的想法，是想着用数组对象的方式定义好，路由名称和引入的路径地址，但是觉得还是不够自动化，新建.vue文件的时候还是需要手动添加；
（2）后来想到用使用require.context方法得到fileName，然后根据字符串裁减和拼接，得到我所需的url和文件相对路径；
例如： component: () =>import(【变量】)，但是后来发现，import()里面，不能使用变量!!!!!!!!!
原因：根据es6module语法，由于import是静态执行，所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。
（3）由由于import的使用限制，不能动态使用() =>import的语法，因此在考虑，能否直接替换掉这种异步加载引入的写法。经过分析，得出pathConfig字段里面有一个属性的内容，是指定的vue页面的default模块内容。经测试，可以使用。
pathConfig的打印内容如下示：
（4）因此“views”文件夹下的".vue"文件，引入成功，并用变量routerAry存储起来，使用concat方法把其他需要手动注册的路由信息，连接起来，进行路由注册。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 查询指定文件夹下的vue页面，自动注册路由
// 仅适用于：一个文件夹下的多个路由页面。用于简单的页面的注册
// pathConfig.default的内容，是指定的vue页面的default模块内容，等同于: () => import('xxxx')
const contextInfo = require.context('../views', false, /.vue$/);
let routerAry = []
contextInfo.keys().forEach(fileName => {
const pathConfig = contextInfo(fileName)
let path = "/" + fileName.substring(2,fileName.length-4)
routerAry.push({
path,
component: pathConfig.default
})
})
const routerList = [
{
path: "/",
redirect: "/animate",
},
{
path: "/openlayers",
component: () => import('../views/openlayers/openlayers')
},{
path: "/render",
component: () => import('../views/render/render')
},{
path: '/vuex',
component: () => import('../views/vuex/vuex')
},{
path: "/echarts",
component: () => import('../views/echarts/echarts')
},{
path: "/ztree",
component: () => import('../views/ztree/ztree')
},{
path: "/ocxplayer",
component: () => import('../views/ocxplayer/ocxplayer')
},{
path: "/animation",
component: () => import('../views/animation/animation')
},
]
const newRouterAry = routerList.concat(routerAry)
const router = new VueRouter({
routes: newRouterAry
})
export default router
以上就是vue使用require.context实现动态注册路由的详细内容，更多关于vue 动态注册路由的资料请关注其它相关文章！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。