前言
在路由配置中,根据目录结构进行配置路由.
正文代码
//首先确保目录结构符合规范
// ../views/about/index.vue
//在about中添加一个文件page.js
//每个文件夹的page.js 填写
export default{
title:'关于我',
menOrder:3,
};
//route.js
import {createRouter,createWebHistory} from 'vue-router';
const pages=import.meta.glob('../views/**/page.js',{
eager:true,
import :'default',
});
const comps=import.meta,glob('../views/**/index.vue')
const routes = Object.entries(pages).map(([path,page])=>{
const comPath=path.replace('page.js','index.vue');
path=path.replace('../views','').replace('/page.js','') || '/'
const name=path:split('/').filter(Boolean).join('-') || 'index'
return {
path,
name,
component:()=>comps[compPath],
meta:{
title:'首页',
menuOrder:1,
},
}
})
export const router=createRouter({
history:createWebHistory(),
routes,
})