記錄---自動生成前端路由最佳實踐

????? 寫在開頭

點贊 + 收藏 === 學(xué)會??????

自動生成前端路由最佳實踐

概述

本文檔介紹如何使用 vite 和 vite-plugin-pages 在前端項目中自動生成前端路由，通過文件系統(tǒng)結(jié)構(gòu)自動映射為路由配置，減少手動維護路由的工作量。

安裝必要依賴

首先需要安裝用于自動生成路由的插件：

npm install vite-plugin-pages --save-dev
# 或
yarn add vite-plugin-pages -D
# 或
pnpm add vite-plugin-pages -D

配置 Vite

在 vite.config.ts 中配置插件：

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    Vue(),
    Pages({
      // 基本配置選項
      dirs: 'src/views', // 路由組件目錄
      exclude: ['**/components/*.vue'], // 排除的組件
      extensions: ['vue'], // 支持的文件類型
      // 更多配置見下文
    }),
  ],
})

基本使用

文件系統(tǒng)路由約定

默認情況下，插件會掃描 src/views 目錄下的 .vue 文件并自動生成路由：

src/views/
  ├── index.vue        -> /
  ├── about.vue        -> /about
  ├── users/
  │   ├── index.vue    -> /users
  │   └── [id].vue     -> /users/:id
  └── blog/
      ├── index.vue    -> /blog
      └── [slug].vue   -> /blog/:slug

動態(tài)路由

使用方括號命名文件來創(chuàng)建動態(tài)路由：

[param].vue -> /:param
[...all].vue -> /*

嵌套路由（不推薦）

創(chuàng)建與父路由同名的目錄來生成嵌套路由：

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

會生成如下路由結(jié)構(gòu)：

{
  "path": "/users",
  "component": "/src/views/users.vue",
  "children": [
    {
      "path": "",
      "component": "/src/views/users/index.vue"
    },
    {
      "path": ":id",
      "component": "/src/views/users/[id].vue"
    }
  ]
}

高級配置(自定義路由屬性)

可以在頁面組件中使用 <route> 塊來自定義路由屬性：

<route>
{
  "meta": {
    "requiresAuth": true
  },
  "alias": ["/home"]
}
</route>

<template>
  <div>Home Page</div>
</template>

修改默認路由

在插件配置中可以通過 extendRoute 修改生成的路由：

Pages({
  extendRoute(route, parent) {
    if (route.path === '/') {
      return {
        ...route,
        alias: ['/home']
      }
    }
    return route
  }
})

使用不同的路由模式

支持生成 vue-router 或 react-router 格式的路由：

Pages({
  routerMode: 'vue' // 或 'react'
})

與路由庫集成

Vue Router 集成

import { createRouter } from 'vue-router'
import routes from 'virtual:generated-pages'

const router = createRouter({
  // ...
  routes,
})

React Router 集成

import { createBrowserRouter } from 'react-router-dom'
import routes from 'virtual:generated-pages'

const router = createBrowserRouter(routes)

類型支持

對于 TypeScript 項目，添加以下類型聲明：

/// <reference types="vite-plugin-pages/client" />

完整配置選項

企業(yè)微信截圖_20250818172122

示例項目結(jié)構(gòu)

my-project/
├── src/
│   ├── pages/
│   │   ├── index.vue
│   │   ├── about.vue
│   │   ├── users/
│   │   │   ├── [id].vue
│   │   │   └── index.vue
│   │   └── blog/
│   │       ├── index.vue
│   │       └── [slug].vue
│   ├── App.vue
│   └── main.ts
├── vite.config.ts
└── package.json

注意事項

生產(chǎn)構(gòu)建時會預(yù)生成路由配置，不會影響性能
熱更新在開發(fā)模式下正常工作
可以通過 console.log(routes) 查看生成的路由結(jié)構(gòu)
對于需要特殊處理的路由，仍然可以手動維護部分路由配置

本文轉(zhuǎn)載于：https://juejin.cn/post/7538829865350840359

如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進步。

posted @ 2025-08-18 17:25 林恒閱讀(136) 評論(0) 收藏舉報

刷新頁面返回頂部

林恒