vue文件自动生成路由的实现方法

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/about",
    name: "about",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

src/
├── pages/
│   ├── index.vue        # -> /
│   ├── about.vue        # -> /about
│   ├── user/
│   │   └── index.vue    # -> /user
│   └── user-[id].vue    # -> /user/:id

import { routes } from "vue-router/auto-routes";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

pnpm add vue-router@5

import VueRouter from "vue-router/vite";

export default defineConfig({
  plugins: [
    VueRouter({
      dts: "typed-router.d.ts",
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
});

// tsconfig.json
{
  "include": [ "typed-router.d.ts" ],
  "vueCompilerOptions": {
    "plugins": [
      "vue-router/volar/sfc-typed-router",
      "vue-router/volar/sfc-route-blocks"
    ]
  }
}

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

// This will update routes at runtime without reloading the page
if (import.meta.hot) {
  handleHotUpdate(router);
}

src/pages/
├── users/
│   └── index.vue
└── users.vue

const routes = [
  {
    path: "/users",
    component: () => import("src/pages/users.vue"),
    children: [
      { path: "", component: () => import("src/pages/users/index.vue") },
    ],
  },
];

src/pages/
├── users/
│   ├── [id].vue
│   └── index.vue
└── users.vue

const routes = [
  {
    path: "/users",
    component: () => import("src/pages/users.vue"),
    children: [
      { path: "", component: () => import("src/pages/users/index.vue") },
      { path: ":id", component: () => import("src/pages/users/[id].vue") },
    ],
  },
  {
    path: "/users/create",
    component: () => import("src/pages/users.create.vue"),
  },
];

src/pages/
├── (admin)/
│   ├── dashboard.vue
│   └── settings.vue
└── (user)/
    ├── profile.vue
    └── order.vue

{
  path: '/',
  component: {
    aux: () => import('src/pages/index@aux.vue')
  }
}

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";

export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: "src/pages", // 自定义路由目录
      extensions: [".vue"], // 指定路由文件扩展名
      dts: "typed-router.d.ts", // 生成类型声明文件
      importMode: (filename) => "async", // 自定义导入模式
    }),
    vue(),
  ],
});