Skip to content

vite 自动生成路由

页面信息配置

  1. 在每个vue页面同级路径下,新建page.js
javascript
export default {
  title:'',   // 中文名称
  menyOrder:1, // 路由排序
}

路由生成

  1. vite 编译时态 对文件目录读取
  2. 通过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
})