当前位置：首页 > news >正文

使用 Vue Router 和 Vite 构建的自动路由生成系统

news 来源：原创 2025/4/22 16:58:16

这段代码是一个使用 Vue Router 和 Vite 构建的自动路由生成系统。它的主要作用是自动扫描 views 目录下的所有 Vue 组件文件，并为它们创建相应的路由配置，无需手动为每个页面定义路由。

主要功能和工作流程

项目说明

结构

.
├── App.vue
├── assets
│   └── vue.svg
├── components
│   ├── HelloWorld.vue
│   └── NavMenu.vue
├── main.js
├── router
│   └── index.js
├── store
│   ├── count
│   │   └── index.js
│   ├── goods
│   │   └── index.js
│   └── index.js
├── style.css
├── utils
│   └── request.js
└── views├── About.vue├── Center.vue├── Home.vue└── User.vue

源码

import { log } from "three/tsl";
import { createRouter, createWebHistory } from "vue-router";// 使用 Vite 的 Glob 导入功能批量导入视图组件
const modules = import.meta.glob("../views/**/*.vue");// 正确输出modules对象内容
console.log("modules ->", modules);
// 输出模块路径列表
console.log("模块路径列表:", Object.entries(modules));// 路由映射配置
const routeMappings = {Home: {path: "/",meta: { title: "首页", icon: "home", order: 1 },},About: {path: "/about",meta: { title: "关于", icon: "info", order: 2 },},User: {path: "/user/:id",meta: { title: "用户详情", icon: "user", requiresAuth: false, order: 3 },},Center: {path: "/center",meta: { title: "中心"