vue3+vite+vue-router实现动态读取文件夹名称和addRoute
获取文件夹名称及其component 动态加载到 router上。背景: 随着项目越来越大,项目路由会越来越多,导致我们每次需要到。方案:借助vite的新增。添加路由,非常的繁琐。
·
背景: 随着项目越来越大,项目路由会越来越多,导致我们每次需要到router.js
添加路由,非常的繁琐。
方案:借助vite的新增属性 获取文件夹名称及其component 动态加载到 router上
文件目录:
// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import './assets/main.css';
const app = createApp(App);
const files = import.meta.glob('./views/Page*.vue'); // 自定义规则
for (let i in files) {
// console.log(123, i, files[i]);
const newName = i.replace(/.\/views\//, '').replace(/.vue/, '');
// console.log(13, newName, newName.toLocaleLowerCase(), files[i]);
router.addRoute({
path: '/' + newName.toLocaleLowerCase(),
name: newName,
component: files[i],
});
}
// console.log(123444, router.getRoutes());
app.use(createPinia());
app.use(router);
app.mount('#app');
// route.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: Home,
},
],
});
export default router;
更多推荐
已为社区贡献33条内容
所有评论(0)