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');
相关推荐
企业对冲系统官2 分钟前
价格风险管理平台审批角色配置与权限矩阵设计
大数据·运维·开发语言·前端·网络·数据库·矩阵
步步为营DotNet3 分钟前
深度剖析.NET 中CancellationToken:精准控制异步操作的关键
java·前端·.net
thinkQuadratic4 分钟前
CSS给文本添加背景颜色等效果
前端·css
波波鱼દ ᵕ̈ ૩5 分钟前
AJAX(1)
前端·javascript·ajax
毕设十刻6 分钟前
基于Vue的酒店管理系统4yv4w(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
乾元7 分钟前
专栏案例合集:AI 网络工程交付的完整闭环—— 从 Demo 到 Production 的工程化方法论
运维·开发语言·网络·人工智能·架构·自动化
梦6507 分钟前
Vue3 响应式原理与响应式属性 详解
前端·javascript·vue.js
摘星编程8 分钟前
React Native for OpenHarmony 实战:Clipboard 剪贴板详解
javascript·react native·react.js
宇钶宇夕10 分钟前
CoDeSys入门实战一起学习(七):CoDeSys任务配置与应用对象详解——程序运行的核心控制
运维·自动化·软件工程
程序员的程11 分钟前
我用 stock-sdk 做了个 A 股股票看板
前端·javascript·typescript