pureadmin的动态路由和静态路由

在 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 中，通常会结合两种路由方式：

• 静态路由：处理登录页、错误页等无需权限控制的公共页面。
• 动态路由：处理业务模块（如用户管理、订单管理等），根据用户角色动态生成可访问的菜单和路由，实现“不同权限的用户看到不同的功能菜单”。

这种设计既保证了公共页面的稳定性，又满足了复杂权限场景下的灵活性。