pureadmin的动态路由和静态路由

在 PureAdmin(基于 Vue3 的后台管理框架)中,静态路由动态路由是实现路由管理的两种方式,主要区别在于路由的定义时机、加载方式和灵活性,具体区别如下:

1. 静态路由

  • 定义方式 :路由规则在代码中硬编码,在项目打包时就已经确定,不会随用户或权限变化。

  • 特点

    • 写死在代码中(通常在 router/modules 目录下),例如登录页、404 页、首页等公共页面。
    • 不需要后端接口支持,加载速度快。
    • 对所有用户可见(除非通过前端逻辑手动过滤)。
  • 示例 (PureAdmin 中):

    javascript 复制代码
    // 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 中,通常会结合两种路由方式:

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

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

相关推荐
IT_陈寒14 分钟前
JavaScript性能优化:这7个V8引擎技巧让我的应用速度提升了50%
前端·人工智能·后端
学渣y26 分钟前
nvm下载node版本,npm -v查看版本报错
前端·npm·node.js
excel32 分钟前
首屏加载优化总结
前端
敲代码的嘎仔39 分钟前
JavaWeb零基础学习Day1——HTML&CSS
java·开发语言·前端·css·学习·html·学习方法
Tachyon.xue3 小时前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
FuckPatience4 小时前
Vue 中‘$‘符号含义
前端·javascript·vue.js
东风西巷6 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪7 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友9 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API10 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright