简单记录一下,昨儿研究vue3+ vite 没有找到现成的自动路由的方案,遂上github上寻找了一些开源项目,借鉴一下人家的写法,很简单,使用
import.meta.glob
但是这个方法有点严格
import.meta.globEager跟import.meta.glob都无法往子文件夹继续查找文件
之前的require.context都是可以的
贴下代码吧
// 引入 router
import { createRouter, createWebHistory } from 'vue-router'
// 引入路由各页面配置
import routes from './routes'
const modules = import.meta.glob('../pages/*.vue');
// 循环进入路由
for (let i in modules) {
let item = modules[i];
const routePath = item.name.replace(/(.*\/)*([^.]+).*/ig,"$2");
routes.push({
path: '/'+routePath,
name: routePath,
title: routePath,
component: () => import(item.name), //.vue不能省略
})
}
// 配置router对象
const router = createRouter({
history: createWebHistory(),
routes
})