vue vite自动化路由无需手动配置

作者：神奇cpp | 2024-07-16 00:55:45

踩

vue vite自动化路由无需手动配置

vue vite自动化路由

测试某些功能或者框架以及库的时候需要创建新vue页面没次都有手动配置
仅仅测试细化的话根据自己需求配置权限这里方便点直接把router文件删掉直接在main.js 引入所有路由注册
这样每次在views下创建一个vue文件直接访即可不用手动注册了

main.js

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';

const views = import.meta.glob('./views/**/index.vue');

const routes = Object.keys(views).map((path) => {
    const name = path.match(/\.\/views\/(.*)\/index\.vue$/)[1];
    return {
        path: `/${name}`,
        name,
        component: views[path],
    };
});

const router = createRouter({
    history: createWebHistory(),
    routes,
});

const app = createApp(App);
app.use(router);
app.mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/831615

vue vite自动化路由 无需手动配置

vue vite自动化路由

vue vite自动化路由无需手动配置