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');
相关推荐
甜味弥漫13 小时前
JavaScript新手必看系列之预编译
前端·javascript
小哀213 小时前
🌸 入职写了一个月全栈next.js 感想
前端·后端·ai编程
用户0102692718613 小时前
swift的inout的用法
前端
用户66006766853913 小时前
搞懂作用域链与闭包:JS底层逻辑变简单
前端·javascript
yinuo14 小时前
前端跨页面通讯终极指南②:BroadcastChannel 用法全解析
前端
没落英雄14 小时前
简单了解 with
前端·javascript
越努力越幸运50814 小时前
webpack的学习打包工具
前端·学习·webpack
IT古董14 小时前
微前端的新纪元:Vite + Module Federation 最强指南(2025 全面技术解析)
前端
小小弯_Shelby14 小时前
vue项目源码泄露漏洞修复
前端·javascript·vue.js
兔子零102414 小时前
CSS 视口单位进化论:从 100vh 的「骗局」到 dvh 的救赎
前端·css