vue使用require.context实现动态注册路由


Posted in Vue.js onDecember 25, 2020

需求场景:

在日常的功能练习和调试过程中,需要一个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下的二级页面,暂时没有想到好的方案)

vue使用require.context实现动态注册路由

router/index.js页面代码

心路历程:

(1)一开始的想法,是想着用数组对象的方式定义好,路由名称和引入的路径地址,但是觉得还是不够自动化,新建.vue文件的时候还是需要手动添加;

(2)后来想到用使用require.context方法得到fileName,然后根据字符串裁减和拼接,得到我所需的url和文件相对路径;

例如: component: () =>import(【变量】),但是后来发现,import()里面,不能使用变量!!!!!!!!!

原因:根据es6module语法,由于import是静态执行,所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。

(3)由由于import的使用限制,不能动态使用() =>import的语法,因此在考虑,能否直接替换掉这种异步加载引入的写法。经过分析,得出pathConfig字段里面有一个属性的内容,是指定的vue页面的default模块内容。经测试,可以使用。

pathConfig的打印内容如下示:

vue使用require.context实现动态注册路由

(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 动态注册路由的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 #Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 #Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
You might like
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
js查找节点的方法小结
2015/01/13 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
python使用turtle绘制分形树
2018/06/22 Python
浅述python中深浅拷贝原理
2018/09/18 Python
django如何实现视图重定向
2019/07/24 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Python eval函数介绍及用法
2020/11/09 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python中time包实例详解
2021/02/02 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
开学典礼校长致辞
2015/07/29 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js