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. 菜单组件根据动态生成的路由自动渲染侧边栏。

核心区别对比

PureAdmin 中的实践

在 PureAdmin 中，通常会结合两种路由方式：

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

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