后台系统面包屑导航/左侧菜单展开项

xinxin_k
138 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情 昨天没有学习小程序，上午写了一会项目，给大家分享一下。

  • 今天写项目，写到了设置后台系统时，刷新页面，侧边菜单默认的展开项还是刷新之前的展开项。
  • 利用下面这个函数即可。
  • 这个函数在侧边菜单SideMenu组件中进行调用。
  • 下面解释一下代码。
  • 首先要往这个函数里传一个从服务器请求回来的当前用户能看到的菜单项数组（userMenus，这个是从store里读取的），currentPath时通过useRoute（）对象path属性读取到当前所在网页的路径。
  • 在函数里遍历菜单，如果菜单项的type属性===1，说明它是一级菜单，就不需要展开，接着递归调用该函数，把它的children属性传进去，以及currentPath，递归调用时直接会走else if(menu.type === 2 && menu.url === currentPath)，因为只有二级菜单的type属性===2，拿到我们当前页所在的路径对象。把当前路径的id作为el-menu的defaultValue的值，这样的话，刷新之后依然会保持在刷新之前的状态
//设置左侧菜单展开项的函数，在NavMenu组件中使用该函数
export function pathMapToMenu(userMenus: any[], currentPath: string): any {
  for (const menu of userMenus) {
    if (menu.type === 1) {
      const findMenu = pathMapToMenu(menu.children, currentPath)
      console.log(findMenu)
      if (findMenu) {
        return findMenu //这得到的是对象
      }
    } else if (menu.type === 2 && menu.url === currentPath) {
      return menu //这得到的是对象
    }
  }
}

1.png

2.png

面包屑导航就是在上面的基础上，做了一些添加，如果能得到findeMenu的话，就让面包屑数组breadcrumbs里push一个对象，最后把这个函数进行调用，把当前这个breadcrumbs数组，传递到el-breadcrumb组件中使用。

// // 面包屑导航
export function pathMapBreadcrumb(userMenus: any[], currentPath: string) {
  // 用来存放面包屑导航遍历的数据
  const breadcrumbs: IBreadcrumb[] = []
  for (const menu of userMenus) {
    if (menu.type === 1) {
      const findMenu = pathMapToMenu(menu.children ?? [], currentPath)

      if (findMenu) {
        // 这块push的是一级菜单对象
        breadcrumbs.push({ name: menu.name, path: menu.url })
        // push二级菜单对象
        breadcrumbs.push({ name: findMenu.name, path: findMenu.url })
        return findMenu //这得到的是对象
      }
    } else if (menu.type === 2 && menu.url === currentPath) {
      return menu //这得到的是对象
    }
  }
  return breadcrumbs
}

NavHeader父组件

5.png

NavHeader逻辑层

这里要监听路由或者菜单的变化，才能每次点击二级菜单，根据url地址的变化重新调用pathMapBreadcrumb函数，从而对breadcrumbs重新赋值，页面才能发生变化 3.png

Breadcrumd子组件

4.png

合并后的代码

6.png

以上两个功能是分开写的，其实也可以合并为一个事件，把合并后的代码给大家看一下。 以上就是我针对上午做的项目进行的总结，希望对写这一部分代码的小伙伴有一些帮助！！！

avatar
文章
阅读
粉丝