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

devtools/2024/9/25 11:38:36/

在项目中,想要在某个文件夹下直接添加.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.ppmy.cn/devtools/116946.html

相关文章

比较器(算法中排序)

方式一&#xff1a;不常用 让实体类实现Comparable接口&#xff0c;泛型是需要比较的类型&#xff0c;同时重写compareTo方法 缺点&#xff1a;对代码有侵入性。 public class Student implements Comparable<Student> {private String name;private double score;// …

Redis解说

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的高性能键值存储数据库&#xff0c;它通常被用作数据库、缓存和消息代理。 由于其内存中的数据结构存储、持久化选项以及丰富的数据类型支持&#xff0c;Redis 在处理大量数据和高并发请求时表现出色。 Redi…

MVC、MVP和MVVM三种设计模式之间的区别是什么

区别&#xff1a; mvc表示“模型-视图-控制器”&#xff0c;mvp表示“模型-视图-演示者”&#xff0c;mvvm表示“模型-视图-视图模型”&#xff1b; mvp、mvvm都是由mvc衍生出的。mvc中&#xff0c;view会直接从model中读取数据&#xff1b;mvp中&#xff0c;view并不直接使用m…

AWS开启MFA,提高安全性

引言 多因素认证&#xff08;Multi-Factor Authentication, MFA&#xff09;是一种重要的安全措施&#xff0c;可以显著提高您的AWS账号的安全性。通过启用MFA&#xff0c;即使密码被盗&#xff0c;攻击者也难以访问您的账户。本文中九河云将详细介绍如何在AWS Management Con…

云计算平台层(PaaS)指的是什么?常见的应用场景盘点

云计算平台层(PaaS)指的是什么&#xff1f;云计算平台层&#xff08;PaaS&#xff09;&#xff0c;全称PlatformasaService&#xff08;平台即服务&#xff09;&#xff0c;是云计算服务的一种重要模式。为用户提供了一个基于云端的开发和部署环境&#xff0c;允许用户开发、运…

C语言编译四大阶段

目录 一、引言 二、预处理阶段 三、编译阶段 四、汇编阶段 五、链接阶段 六、总结 本文将详细介绍C语言编译的四个阶段&#xff0c;包括预处理、编译、汇编和链接。通过学习这些阶段&#xff0c;读者可以更好地理解C语言程序的编译过程&#xff0c;提高编程效率。 一、引…

01DSP学习-了解DSP外设-以逆变器控制为例

(由于是回忆自己简单的DSP学习过程&#xff0c;所以博客看起来有些没有章法&#xff0c;请见谅~) 上一篇博客介绍了学习DSP需要的软件和硬件准备&#xff0c;以及一个DSP的工程包含了哪些东西。我的学习方法是目的导向&#xff0c;即我需要用什么我就学什么&#xff0c;并没有…

大数据新视界 --大数据大厂之Kubernetes与大数据:容器化部署的最佳实践

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…