在 PureAdmin（基于 Vue3 的后臺管理框架）中，靜態路由和動態路由是實現路由管理的兩種方式，主要區別在于路由的定義時機、加載方式和靈活性，具體區別如下：

1. 靜態路由

• 定義方式：路由規則在代碼中硬編碼，在項目打包時就已經確定，不會隨用戶或權限變化。
• 特點：
  • 寫死在代碼中（通常在 router/modules 目錄下），例如登錄頁、404 頁、首頁等公共頁面。
  • 不需要后端接口支持，加載速度快。
  • 對所有用戶可見（除非通過前端邏輯手動過濾）。
• 示例（PureAdmin 中）：

  // router/modules/static.js
  export default [{path: '/login',name: 'Login',component: () => import('@/pages/login/index.vue'),meta: { title: '登錄', hidden: true }},{path: '/404',name: '404',component: () => import('@/pages/error/404.vue'),meta: { title: '頁面不存在', hidden: true }}
  ]
  

2. 動態路由

• 定義方式：路由規則不在代碼中硬編碼，而是根據用戶權限或后端返回數據動態生成，在用戶登錄后通過接口獲取并添加到路由系統中。
• 特點：
  • 路由規則由后端接口返回（例如根據用戶角色返回可訪問的菜單），前端動態注冊。
  • 支持精細化權限控制，不同用戶看到的路由（菜單）不同。
  • 需配合權限管理系統使用，靈活性高。
• 示例流程（PureAdmin 中）：
  1. 用戶登錄后，前端調用接口獲取該用戶的權限路由列表。
  2. 前端將后端返回的路由數據（通常是 JSON 格式）轉換為 Vue Router 可識別的路由配置。
  3. 通過 router.addRoute() 方法動態添加路由。
  4. 菜單組件根據動態生成的路由自動渲染側邊欄。

核心區別對比

維度	靜態路由	動態路由
定義時機	項目打包時固定	用戶登錄后動態獲取
數據來源	前端代碼硬編碼	后端接口返回（基于用戶權限）
權限關聯性	不依賴權限，對所有用戶可見	與用戶權限強關聯，按需返回
靈活性	固定不變，修改需重新打包	可實時調整，無需重新打包
適用場景	公共頁面（登錄、404等）	業務頁面（根據角色權限動態展示）

PureAdmin 中的實踐

在 PureAdmin 中，通常會結合兩種路由方式：

• 靜態路由：處理登錄頁、錯誤頁等無需權限控制的公共頁面。
• 動態路由：處理業務模塊（如用戶管理、訂單管理等），根據用戶角色動態生成可訪問的菜單和路由，實現“不同權限的用戶看到不同的功能菜單”。

這種設計既保證了公共頁面的穩定性，又滿足了復雜權限場景下的靈活性。