想做一些功能测试,dem什么的,做一些小功能测试,每次都要自己手动配置路由,挺费劲的。就做了一个根据文件夹动态生成路由。
兄弟们,用上就给点个赞吧 ,谢谢!
- 代码如下:
配置router
// main.js router配置:
import { createApp } from 'vue';
import App from './App.vue';
// 导入上面新建的路由文件
import router from './router/index.js';
const app = createApp(App);
app.use(router);
app.mount('#app');
- router.js代码
import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';
// 自动导入 components 目录下的所有 Vue 文件
const modules = import.meta.glob('../components/*.vue');
const routes = [];
// 遍历所有导入的模块,生成路由配置
for (const path in modules) {
const componentName = path.match(/\.\/components\/(.*)\.vue$/)[1];
const route = {
path: `/${componentName.toLowerCase()}`,
name: componentName,
component: defineAsyncComponent(modules[path])
};
routes.push(route);
}
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;