记录---自动生成前端路由最佳实践
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">自动生成前端路由最佳实践</h2>
<h3 data-id="heading-1">概述</h3>
<p>本文档介绍如何使用 <code>vite</code> 和 <code>vite-plugin-pages</code> 在前端项目中自动生成前端路由，通过文件系统结构自动映射为路由配置，减少手动维护路由的工作量。</p>
<h3 data-id="heading-2">安装必要依赖</h3>
<p>首先需要安装用于自动生成路由的插件：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm install vite-plugin-pages --save-dev
# 或
yarn add vite-plugin-pages -D
# 或
pnpm add vite-plugin-pages -D</pre>
</div>
<h3 data-id="heading-3">配置 Vite</h3>
<p>在 <code>vite.config.ts</code> 中配置插件：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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'], // 支持的文件类型
// 更多配置见下文
}),
],
})</pre>
</div>
<h3 data-id="heading-4">基本使用</h3>
<h4 data-id="heading-5">文件系统路由约定</h4>
<p>默认情况下，插件会扫描 <code>src/views</code> 目录下的 <code>.vue</code> 文件并自动生成路由：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">src/views/
├── index.vue -> /
├── about.vue -> /about
├── users/
│ ├── index.vue -> /users
│ └── .vue -> /users/:id
└── blog/
├── index.vue -> /blog
└── .vue -> /blog/:slug</pre>
</div>
<h4 data-id="heading-6">动态路由</h4>
<p>使用方括号命名文件来创建动态路由：</p>
<ul>
<li><code>.vue</code> -> <code>/:param</code></li>
<li><code>[...all].vue</code> -> <code>/*</code></li>
</ul>
<h4 data-id="heading-7">嵌套路由（不推荐）</h4>
<p>创建与父路由同名的目录来生成嵌套路由：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">src/views/
├── users/
│ ├── .vue
│ └── index.vue
└── users.vue</pre>
</div>
<p>会生成如下路由结构：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">{
"path": "/users",
"component": "/src/views/users.vue",
"children": [
{
"path": "",
"component": "/src/views/users/index.vue"
},
{
"path": ":id",
"component": "/src/views/users/.vue"
}
]
}</pre>
</div>
<h3 data-id="heading-8">高级配置(自定义路由属性)</h3>
<p>可以在页面组件中使用 <code><route></code> 块来自定义路由属性：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><route>
{
"meta": {
"requiresAuth": true
},
"alias": ["/home"]
}
</route>
<template>
<div>Home Page</div>
</template></pre>
</div>
<h4 data-id="heading-9">修改默认路由</h4>
<p>在插件配置中可以通过 <code>extendRoute</code> 修改生成的路由：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">Pages({
extendRoute(route, parent) {
if (route.path === '/') {
return {
...route,
alias: ['/home']
}
}
return route
}
})</pre>
</div>
<h4 data-id="heading-10">使用不同的路由模式</h4>
<p>支持生成 <code>vue-router</code> 或 <code>react-router</code> 格式的路由：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">Pages({
routerMode: 'vue' // 或 'react'
})</pre>
</div>
<h3 data-id="heading-11">与路由库集成</h3>
<h4 data-id="heading-12">Vue Router 集成</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { createRouter } from 'vue-router'
import routes from 'virtual:generated-pages'
const router = createRouter({
// ...
routes,
})</pre>
</div>
<h4 data-id="heading-13">React Router 集成</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { createBrowserRouter } from 'react-router-dom'
import routes from 'virtual:generated-pages'
const router = createBrowserRouter(routes)</pre>
</div>
<h3 data-id="heading-14">类型支持</h3>
<p>对于 TypeScript 项目，添加以下类型声明：</p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/// <reference types="vite-plugin-pages/client" /></pre>
</div>
</div>
<div class="code-block-extension-header">
<h3 data-id="heading-15">完整配置选项</h3>
</div>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202508/2149129-20250818172423215-1785131345.png" alt="企业微信截图_20250818172122" loading="lazy"></p>
<h3 data-id="heading-16">示例项目结构</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">my-project/
├── src/
│ ├── pages/
│ │ ├── index.vue
│ │ ├── about.vue
│ │ ├── users/
│ │ │ ├── .vue
│ │ │ └── index.vue
│ │ └── blog/
│ │ ├── index.vue
│ │ └── .vue
│ ├── App.vue
│ └── main.ts
├── vite.config.ts
└── package.json</pre>
</div>
<h3 data-id="heading-17">注意事项</h3>
<ol>
<li>生产构建时会预生成路由配置，不会影响性能</li>
<li>热更新在开发模式下正常工作</li>
<li>可以通过 <code>console.log(routes)</code> 查看生成的路由结构</li>
<li>对于需要特殊处理的路由，仍然可以手动维护部分路由配置</li>
</ol>
<div>
<h2>本文转载于：https://juejin.cn/post/7538829865350840359</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19045061
頁:
[1]