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 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python 从attribute到property详解
2020/03/05 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Django中ORM的基本使用教程
2020/12/22 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
优秀教师事迹简介
2014/02/02 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
关于python类SortedList详解
2021/09/04 Python