Vue + Element Plus 实现权限管理系统(五):实现面包屑导航

面包屑导航在后台管理系统中是一个非常常见的功能,它用于显示用户当前所在页面的位置路径。通常以层次结构的方式呈现，从首页或主目录开始，逐级显示用户所访问的页面的父级页面，直到当前页面。通过面包屑导航，用户可以清楚地知道当前所在页面的位置，并且可以方便地返回到上一级或其他父级页面,大大提高了用户体验。本篇文章最终要实现的面包屑导航如下图示

Breadcrumb 面包屑组件

在element plus已经为我们提供了面包屑组件Breadcrumb,我们可以在项目中直接使用

它的用法很简单,separator 属性来规定分隔符,el-breadcrumb-item的 to 属性中的 path 可以配置要跳转的路由。因此我们可以定义一个专门存放面包屑的数组,然后根据这个数组遍历el-breadcrumb-item组件即可

全局定义 breadcrumbs

我们将 breadcrumbs 定义到全局状态管理器 store/index.ts 中

同时在 store/types/index.ts 中定义了它的格式,名字和跳转路由

export type Breadcrumb = { name: string, path: string };

此时我们的breadcrumbs数组还是空的,所以接下来我们要根据页面路由的跳转向数组中添加对应格式的数据

路由转换

在 vue 中我们可以获取到当前页面路由的 path,比如/dd/child_1_1

其中dd对应的是父菜单1,child_1_1对应的是子菜单1.1,那么 breadcrumbs 应该是这样的

[
  {
    name: "父菜单1",
    path: "dd",
  },
  {
    name: "子菜单1",
    path: "child_1_1",
  },
];

接下来我们来看如何将 path 转成这样的格式,我们在 utils/filterBreadCrumb.ts 下定义一个转换的函数 filterBreadCrumb,将 path 按照/拆成一个数组,然后找到数组中元素(path)对应的菜单名称(name)。

想要找到 path 对应的菜单名则需要遍历菜单列表,先找外层有每没有,找不到再找它的 children,所以这里又用到了经典的递归写法,最后代码如下

import { Breadcrumb } from "@/store/types";
export const filterBreadCrumb = (path: string, menuList: any) => {
  let paths = path.split("/");
  //去掉空元素
  paths = paths.filter((item) => item);
  const breadCrumbs: Breadcrumb[] = [];
  paths.forEach((item, index) => {
    breadCrumbs.push({
      name: getMenuName(item, menuList),
      //父菜单是不能点击的
      path: index === paths.length - 1 ? item : "",
    });
  });
  return breadCrumbs;
};

export const getMenuName = (path: string, menuList: any): string => {
  for (let i in menuList) {
    if (menuList[i].path === path) {
      return menuList[i].name;
    }
    if (menuList[i]?.children?.length) {
      if (getMenuName(path, menuList[i].children))
        return getMenuName(path, menuList[i].children);
    }
  }
  return "";
};

这里由于父菜单是不能点击跳转路由的,以为它是目录,给了 path,点击就会找不到路由。因此加个判断,父菜单的 path 给空,写到这里我才发现这样的话其实可以删除path这个字段

导航栏使用 Breadcrumb

最后我们在导航栏navbar中使用Breadcrumb

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        v-for="item in homeStore.breadcrumbs"
        :to="item.path ? { path: item.path } : ''"
      >
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>

同时这里我们加入了一个固定的首页面包屑点击可以直接回到首页,到这里一个简单的面包屑导航就实现啦

仓库地址