携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

动态路由 - 侧边栏菜单🍈

引言

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

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

侧边栏菜单

在上一节，我们分析了一下，做一个 动态路由 所需要的条件。以及 简单的 静态路由

现在进行 侧边栏菜单 的 动态 生成。

这需要我们的 菜单管理 所配置的 菜单，来进行处理

处理数据结构

分析一下我们所要的数据结构，其实和静态路由类似，但是少了一个 components

而且只是展示 菜单 类， 不需要展示 按钮 类

数据结构的示例如下

/**
 * 示例
 */
const demo = {
  path: '/',
  name: 'Layout',
  meta: {
    title: '首页', // 菜单名
    icon: 'icon-banbenqiehuan', // 菜单的icon
    alone: false, // 是否是单页
    hidden: false // 是否隐藏
  },
  children: []
}

• 首先我们需要调取我们 菜单管理 中的所有 菜单，是一个列表

  • 接口的话，之前的文章已经写过了，这里就不粘贴了，直接撸干货。

• 第二 就是 循环遍历我们的 菜单列表，来构造出我们所需的结构形式

• 第三 由于不确定传来的 url 地址的格式

  • 所以我们必须将 url 地址，转成我们的 path 统一起来。

• 接下来就是将得到的 菜单结构 通过 Pinia 保存起来

• 最后在 侧边栏菜单 位置处 调用即可。

import { getMenusAll } from '@/api'

getMenusAll({})
  .then((res: any) => {
    const routeList = getTree(res.menus)
  })
  .catch((err) => {
    console.log('err', err)
  })
  
  
const getTree = (list, pid = 0, pidPath = '') => {
  return list
    .filter((item) => item.pid === pid)
    .map((item) => {
      const url = item.url.startsWith('/') ? item.url : '/' + item.url
      const pidRouterPath = pid === 0 ? url : pidPath + url
      return {
        path: pidRouterPath,
        name: pidRouterPath?.slice(1),
        pidRouterPath,
        meta: {
          title: item.name, // 菜单名
          icon: item.icon, // 菜单的icon
          hidden: item.type === 2 ? true : false, // 是否隐藏
          isDynamic: true // 是动态路由
        },
        children: item.type === 1 ? [] : getTree(list, item.id, pidRouterPath)
      }
    })
}

由于 侧边栏菜单 我们之前写好了，不需要动。所以只需要将数据保存起来

SetMenus(menus) {
  this.menus = menus
},

最终我们的侧边栏菜单就搞定了，附一个效果图

总结

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

这里我们 将 侧边栏菜单 处理完毕