vite 自动生成路由
页面信息配置
- 在每个vue页面同级路径下,新建page.js
javascript
export default {
title:'', // 中文名称
menyOrder:1, // 路由排序
}
路由生成
- vite 编译时态 对文件目录读取
- 通过import.meta.glob 方法读取目录结构,并且生成路由
javascript
const pages = import.meta.glob('../views/**/page.js',{
eager:true,
import:'defalut'
})
const comps = import.meta.glob('../views/**/index.vue')
const routes = Object.entries(pages).map(([path.page])=>{
const compPath = 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,
}
})
export const router = createRouter({
history:createWebHistory(),
routes
})