vue3-vite-根据文件夹内的vue文件,动态生成router路由

想做一些功能测试,dem什么的,做一些小功能测试,每次都要自己手动配置路由,挺费劲的。就做了一个根据文件夹动态生成路由。

兄弟们,用上就给点个赞吧 ,谢谢!

  1. 代码如下:

                配置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');
  1.  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;    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值