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

我们在测试或者小项目中经常遇到一个问题,就是加一个页面,就要在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
相关推荐
mapbar_front20 分钟前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie41 分钟前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀1 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻1 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树1 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔1 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城1 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04122 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj502 小时前
前端基础之《React(1)—webpack简介》
前端·react
会写代码的饭桶2 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins