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');
相关推荐
逸A4 分钟前
某里v2反混淆 codec 化路上踩到的两个隐蔽坑:被清零的 salt 与 opaque loop bound
javascript·人工智能·目标跟踪
丷丩8 分钟前
MapLibre GL JS第11课:获取鼠标指针坐标
前端·javascript·gis·地图·mapbox·maplibre gl js
代码AI弗森16 分钟前
前端周刊第 467 期[特殊字符] 本期精选目录
前端
随便的名字17 分钟前
前端路由的底层逻辑:URL 中 # 和 ? 的区别与关系详解
前端
kongba00718 分钟前
ttyd Web终端安装指南(OpenCloudOS 9)
linux·前端
zhoumeina9919 分钟前
前端串行合成流程 + 每张图上传接口
前端·状态模式
风骏时光牛马20 分钟前
Swift 基于MVVM架构实现完整列表数据展示与交互功能实战案例
前端
2501_9272835824 分钟前
堆垛机立体库:告别人工翻找与货物堆压
大数据·人工智能·低代码·自动化·区块链
就叫_这个吧29 分钟前
JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用
开发语言·前端·javascript
console.log('npc')33 分钟前
Windows试用期重置工具,纯官方 / 安全教程
运维·自动化·typora·脚本