从零开始学Vue3--根据目录结构自动生成路由

隐形喷火龙2024-05-29 17:38

我们在测试或者小项目中经常遇到一个问题，就是加一个页面，就要在router.js中加一个路由，相当的麻烦，有没有办法可以根据目录结构自动生成路由呢？

想要自动生成路由，最重要的是能够获取指定目录下vue的路径，幸运的是通过vite的import.meta.glob可以获取到,webpack可以通过require.context获取文件名，参考文章:vue3 vite中require.context报错_vite require.context-CSDN博客

1.获取文件路径

javascript 复制代码

const requireComponent = import.meta.glob('@/views/**/*.vue', {eager: false})
for (let key in requireComponent) {
    console.log(key)
}

打印结果

结果很完美，我只要根据这个路径加入到动态路由就行了,实现类似以下的效果就行了

javascript 复制代码

router.addRoute({
        path: '/basic/AttrBind',
        component: () => import('/src/views/basic/AttrBind')
    })

2.完整路由代码

javascript 复制代码

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 获取views下面所有vue文件
const requireComponent = import.meta.glob('@/views/**/*.vue', {eager: false})
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView
        }
    ]
})
// 通过vue文件路径动态添加路由
for (let key in requireComponent) {
    let path = key.replace(/^\/src\/views/, '').replace(/\.vue$/, '');
    router.addRoute({
        path,
        component: () => import(/* @vite-ignore */key)
    })
}

export default router