持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

动态菜单

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

动态菜单

上一节，我们通过该用户所拥有的 角色id列表 成功获取了 菜单id列表

这一节，我们把前端的 动态菜单 进行实现

路由结构

这里再来明确下目前的路由结构

 {
    path: '/sys',
    name: 'sys',
    component: Layout,
    meta: {
      title: '系统管理',
      icon: 'icon-G-stack-line',
      isDynamic: true
    },
    children: [
      {
        path: '/menu',
        name: 'menu',
        component: () => import(/* webpackChunkName: "menu" */ '@/views/sys/menu/index.vue'),
        meta: {
          title: '菜单管理'
          icon: 'icon-G-stack-line',
          isDynamic: true
        },
      }
    ]
  }

这里有个知识点，这句代码是什么意思呢？

/* webpackChunkName: "menu" */

其实这个是，魔法注释，主要是 webpack 打包时，output 配置的 chunkFilename。

如果想要控制路由是否显示，那么我们需要在 meta 中添加一个字段为 hidden，值为 ture 或者 false

ture 代表的是隐藏，false 代表的是展示。

meta: {
  title: '菜单管理'
  icon: 'icon-G-stack-line',
  isDynamic: true,
  hidden: true
}

既然知道了如何控制路由的展示，而且我们在上一节当中，能够成功的获取当前用户拥有的一个 菜单id列表

并且之前也已经成功获取到了所有菜单的列表数据

那么我们最后只需要进行比较判断即可。

循环当前系统所有的菜单列表数据，判断 当前的菜单id 是否在当前用户的一个 菜单id列表 中。

  // 获取 显示存到 Pinia 当中的，当前用户所拥有的 菜单id列表
  const userMenusId: any = userStore.getUserMenusId

由于具体的代码量太多了，逻辑较复杂，这里进行截图

即可成功的知道当前菜单的一个展示情况。

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

完成了根据当前用户拥有的id列表，与所有菜单数据进行比较，获取到所需展示的菜单，即为动态菜单。

后台项目 Express-Mysql-Vue3-TS-Pinia 动态菜单

动态菜单

引言

动态菜单

路由结构

总结