腳本之家服務器常用軟件

快捷導航

vue文件自動生成路由的實現(xiàn)方法

更新時間：2026年03月02日 09:43:48 作者：ashuicoder

vue-router悄悄發(fā)布了5.0版本,用官方的話說,V5 是一個過渡版本,它將unplugin-vue-router（基于文件的路由）合并到了核心包中,就是說V5版本直接支持基于文件自動生成路由了,下面就來詳細的介紹一下

這一變化標志著前端開發(fā)模式的一個重要轉折點。過去，開發(fā)者需要手動定義路由配置，這種方式雖然靈活，但隨著項目規(guī)模增大，維護成本也隨之增加。現(xiàn)在，Vue Router 5.0內置了基于文件的路由系統(tǒng)，使得路由管理變得更加直觀和高效。

傳統(tǒng)路由配置與基于文件路由的對比

在傳統(tǒng)的Vue Router使用方式中，我們需要手動創(chuàng)建路由：

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,
});

而基于文件的路由系統(tǒng)允許我們通過目錄結構自動生成路由，例如：

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

無需手動創(chuàng)建，直接導入即可：

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

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

省去了手動定義路由的繁瑣步驟。

基于文件路由的優(yōu)勢

減少樣板代碼：無需手動編寫大量路由配置
約定優(yōu)于配置：通過文件名和目錄結構確定路由路徑
提高開發(fā)效率：添加新頁面只需創(chuàng)建對應文件
易于維護：路由結構一目了然，便于團隊協(xié)作
類型化路由：使用ts能夠獲得更好的提示，比如router.push(xxx)現(xiàn)在會有提示了

缺點

路由的meta等額外數(shù)據(jù)必須在.vue文件使用definePage或route標簽聲明，點此查看教程
增加了額外的學習成本

快速入門

安裝

pnpm add vue-router@5

vite.config.ts

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

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

src/router/index.ts

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);
}

詳細的路由生成規(guī)則

根據(jù)官方文檔，基于文件的路由系統(tǒng)有以下具體規(guī)則：

索引路由：任何 index.vue 文件（必須全小寫）將生成空路徑，類似于 index.html 文件：

src/pages/index.vue 生成 / 路由
src/pages/users/index.vue 生成 /users 路由

嵌套路由：當在同一層級同時存在同名文件夾和 .vue 文件時，會自動生成嵌套路由。例如：

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") },
    ],
  },
];

不帶布局嵌套的路由：有時候你可能想在URL中添加斜杠形式的嵌套，但不想影響UI層次結構。可以使用點號(.)分隔符：

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

要添加 /users/create 路由而不將其嵌套在 users.vue 組件內，可以創(chuàng)建 src/pages/users.create.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"),
  },
];

路由組：有時候需要組織文件結構而不改變URL。路由組允許你邏輯性地組織路由，不影響實際URL：

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

生成的URL：

/dashboard -> 渲染 src/pages/(admin)/dashboard.vue
/settings -> 渲染 src/pages/(admin)/settings.vue
/profile -> 渲染 src/pages/(user)/profile.vue
/order -> 渲染 src/pages/(user)/order.vue

命名視圖：可以通過在文件名后附加 @ + 名稱來定義命名視圖，如 src/pages/index@aux.vue 將生成：

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

默認情況下，未命名的路由被視為 default，即使有其他命名視圖也不需要將文件命名為 index@default.vue。

動態(tài)路由：使用方括號語法定義動態(tài)參數(shù)：

[id].vue -> /users/:id
[category]-details.vue -> /electronics-details
[...all].vue -> 通配符路由 /all/*

對開發(fā)工作流的影響

這一變化將顯著改變Vue應用的開發(fā)流程：

新功能頁面的添加變得更加簡單
團隊成員更容易理解項目的路由結構
減少了因手動配置錯誤導致的路由問題
更好的IDE集成和自動補全支持

遷移策略

對于現(xiàn)有項目，Vue Router 5.0提供了平滑的遷移路徑：

舊的路由配置方式依然有效
可以逐步采用基于文件的路由
混合使用兩種方式以適應不同場景

配置選項和高級功能

Vue Router 5.0的基于文件路由系統(tǒng)提供了豐富的配置選項，可以根據(jù)項目需求進行定制：

自定義路由目錄：默認情況下，系統(tǒng)會在 src/pages 目錄中查找 .vue 文件，但可以通過配置更改此行為。

命名路由：所有生成的路由都會自動獲得名稱屬性，避免意外將用戶引導至父路由。默認情況下，名稱使用文件路徑生成，但可以通過自定義 getRouteName() 函數(shù)覆蓋此行為。

類型安全：系統(tǒng)會自動生成類型聲明文件（如 typed-router.d.ts），提供幾乎無處不在的 TypeScript 驗證。

配置示例：

// 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(),
  ],
});