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');
相关推荐
鱼干~3 分钟前
【全栈知识点】全栈开发知识点
前端·人工智能·c#
英俊潇洒美少年3 分钟前
迷你 React 调度器(带优先级+时间切片)手写实现
前端·javascript·react.js
chQHk57BN7 分钟前
PWA开发指南:构建可离线使用的渐进式Web应用
前端
数据学徒工12 分钟前
20-Decisions Dashboard:仪表板从入门到实战
低代码·自动化·代码规范·敏捷流程
weixin_4080996714 分钟前
【保姆级教程】按键精灵调用 OCR 文字识别 API(从0到1完整实战 + 可运行脚本)
java·前端·人工智能·后端·ocr·api·按键精灵
xdl259919 分钟前
CSS flex 布局中没有 justify-items
前端·css
百撕可乐19 分钟前
WenDoraAi官网NextJS实战04:HTTP 请求封装与SSR
前端·网络·网络协议·react.js·http
Sestid22 分钟前
前端AI编程使用技巧(后续会更新cursor和claude code for vscode)
前端·vscode·ai编程·claude·cursor
freeWayWalker25 分钟前
Vue通用缩放容器
前端·javascript·vue.js