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

vue vite自动化路由

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

main.js

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');
相关推荐
柒和远方34 分钟前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
卓怡学长40 分钟前
w266基于spring boot + vue 圣地延安美食乐享系统
java·数据库·vue.js·spring boot·spring·intellij-idea
云飞云共享云桌面1 小时前
单机建模卡顿运维繁琐!中小型机械制造厂云飞云 3D 云桌面落地
运维·服务器·网络·3d·自动化·电脑·负载均衡
minglie11 小时前
npm ali-oss库依赖冲突
前端·npm
CryptoPP1 小时前
BSE股票K线数据接入实战:从接口调用到前端图表展示
大数据·前端·网络·人工智能·websocket·网络协议
爱上纯净的蓝天2 小时前
使用 AtomCode 构建微前端架构:从设计到实现实战
架构·vue·实战·react·微前端·atomcode
zandy10112 小时前
体验家 XMPlus 批量操作与自动化工作流引擎:让大规模运营从手动执行走向规则驱动
大数据·运维·自动化
没落英雄3 小时前
5. 从零开始搭建一个 AI Agent —— 人机协作与中断恢复
前端·人工智能·架构
品尚公益团队4 小时前
C#在asp.net网页开发中的带cookie登录实现
前端·c#·asp.net
多加点辣也没关系4 小时前
JavaScript|第9章:对象 — 基础
开发语言·javascript·ecmascript