欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > IT业 > vue3更具文件目录动态添加路由配置

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

2025/5/7 17:04:30 来源:https://blog.csdn.net/A_one2010/article/details/142493264  浏览:    关键词: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;

即可跳转对应的页面;   

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词