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;
即可跳转对应的页面;