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');
相关推荐
特立独行的猫A13 小时前
一份代码,多端产物:仓颉语言的cj-tauri 框架开发桌面和鸿蒙应用指南
前端
代码猎人13 小时前
前端怎么精通Vue3核心原理
前端
不可能片场13 小时前
工程实践 台账备份从全量复制改成增量日志
前端·electron
2603_9658966213 小时前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
进击的明明13 小时前
前端开发中的 BEM 国际命名规范:让 CSS 不再"打架"
前端·css·html
Web极客码13 小时前
决策模型 + LLM:用 Python 拆解浏览器自动化工作流
java·python·自动化
deli00713 小时前
中文在网址里为什么变成 E4B8AD?URL 编码 22 组用例实测
前端
羲云13 小时前
MOSS-Image 开源后爆火:5B 生图模型真正值得关注的,是可控排版
前端
BreezeJiang13 小时前
闭包和 useState 是两个知识点?你可能只学了半条作用域链
前端·面试
2601_9583529013 小时前
一款模块通吃15类语音产品?AN-93如何实现录音笔、门禁、IPC的快速适配
前端·人工智能·嵌入式硬件·回声消除·降噪处理