当前位置: 首页 > article >正文

vue3更具文件目录动态添加路由配置

在项目中,想要在某个文件夹下直接添加.vue文件,并根据文件自动生成route跳转,

在view文件夹下,建立threePage文件夹,在里面建立index.vue,index1.vue;

建立three.js文件,

动态获取view/threePage里面文件,配置文件router对象。


const modulesFiles =  import.meta.glob('../views/threePage/*.vue');
let routerArr = [];
Object.keys(modulesFiles).forEach(item => {
	if(/\.vue/.test(item)){
		let pageArr = item.split('/');
		let str = pageArr[pageArr.length-1];
		let pageName = str.split('.')[0];
		routerArr.push({
			path: '/three/' + pageName,
			name: 'three/'+ pageName,
			component: () => import(item),
			meta: {
				keepAlive: true,
				title: 'threeIndex'
			}
		});
	}
});
console.log(routerArr, 'routerArr');
export default routerArr

在router的index文件内引入上述文件,打开对应的页面路径 

 /three/index?a=1;   

 /three/index1?a=1;

即可跳转对应的页面;   


http://www.kler.cn/news/324129.html

相关文章:

  • django drf 统一Response格式
  • ES6的简单介绍(第二部分)
  • Unity与AI对话系统互动生成表情示例
  • linux的中断管理机制
  • Python实现Phong着色模型算法
  • sheng的学习笔记-AI-时序差分学习
  • Android——ContentObserver监听短信
  • Mysql高级篇(中)——锁机制
  • 前端测试最强教程 - 实现 fake http 和 fake db
  • [SAP ABAP] SELECT-OPTIONS
  • 线程池面试集
  • 「JavaScript深入」深拷贝与浅拷贝,如何手写实现?
  • npm下载淘宝镜像的方式和用法
  • 在一个.NET Core项目中使用RabbitMQ进行即时消息管理
  • 前端注释规范
  • Mac安装manim
  • R包:VennDiagram韦恩图
  • 1.2.3 HuggingFists安装说明-MacOS安装
  • 供应链 | 顶刊POMS论文精读:交易成本经济学(TCE)——供应链效率理论
  • 小白投资理财 - 证券开户
  • WPF MVVM入门系列教程(一、MVVM模式介绍)
  • React 有哪些生命周期
  • 开源服务器管理软件Nexterm
  • 提取出来的ip与我原本的ip是在同一个区吗
  • Python编码系列—Python备忘录模式:掌握对象状态保存与恢复技术
  • 【成神之路】Ambari实战-013-代码生命周期-metainfo-configFiles详解
  • 【Linux】包管理器、vim详解及简单配置
  • 实战C++手写线程池
  • windows11下vscode配置lua环境
  • 1欧几里得聚类提取