哈尔滨网站空间,gae wordpress,秦皇岛网站制作服务,公司变更说明函我们在测试或者小项目中经常遇到一个问题#xff0c;就是加一个页面#xff0c;就要在router.js中加一个路由#xff0c;相当的麻烦#xff0c;有没有办法可以根据目录结构自动生成路由呢#xff1f;
想要自动生成路由#xff0c;最重要的是能够获取指定目录下vue的路径…我们在测试或者小项目中经常遇到一个问题就是加一个页面就要在router.js中加一个路由相当的麻烦有没有办法可以根据目录结构自动生成路由呢
想要自动生成路由最重要的是能够获取指定目录下vue的路径幸运的是通过vite的import.meta.glob可以获取到,webpack可以通过require.context获取文件名参考文章:vue3 vite中require.context报错_vite require.context-CSDN博客
1.获取文件路径
const requireComponent import.meta.glob(/views/**/*.vue, {eager: false})
for (let key in requireComponent) {console.log(key)
} 打印结果 结果很完美我只要根据这个路径加入到 动态路由就行了,实现类似以下的效果就行了
router.addRoute({path: /basic/AttrBind,component: () import(/src/views/basic/AttrBind)}) 2.完整路由代码
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
