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');
相关推荐
zzywxc7871 小时前
编程算法在金融、医疗、教育、制造业等领域的落地案例
人工智能·算法·金融·自动化·copilot·ai编程
求知若渴,虚心若愚。3 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj4 小时前
最新的前端技术和趋势(2025)
前端
paopaokaka_luck4 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~4 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟5 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人5 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus6 小时前
Nuxt.js基础与进阶
前端·vue.js
厦门辰迈智慧科技有限公司6 小时前
排水管网实时监测筑牢城市安全防线
网络·物联网·安全·自动化·监测
樱花开了几轉6 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js