vue3中后台管理系统中应用面包屑组件

后台管理系统中一般都有面包屑，下面我们一起来看一下对于面包屑的应用。

面包屑组件官网element plus:https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 

目录

一、应用面包屑组件的优点

二、面包屑的相关内容

1、面包屑组件

2、路由

3、面包屑组件应用

三、运行结果 

一、应用面包屑组件的优点

       将页面中的路由的标题写在每一个页面上，开发效率低，不便于维护，统一封装面包屑组件，维护该组件的样式等相关内容比较便利，大大提高开发效率

二、面包屑的相关内容

1、面包屑组件

首先获取当前页面匹配的路由(route.matched)，将当前页面的路由数组循环遍历，得到面包屑组件，代码如下：

<template>
  <div class="bread-wrap">
    <el-breadcrumb :separator-icon="ArrowRight">
      <!-- 最末尾的级别span 不给跳转,其他的router-link可以跳转-->
      <el-breadcrumb-item v-for="(item, index) in breadList">
        <span v-if="index == breadList.length - 1">{{ item.meta.title }}</span>
        <router-link v-else :to="item.path">{{ item.meta.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { computed } from "vue";
const route = useRoute();

const breadList = computed(() => {
  return route.matched;
});
</script>
<style>
.bread-wrap {
  padding: 10px 0;
}
</style>

2、路由

路由数据格式如下：

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    meta: {
      title: "首页",
      icon: "Location",
      hide: false,
    },
    component: () => import("../pages/home/index.vue"),
  },
  {
    path: "/views",
    name: "views",
    meta: {
      title: "基础数据管理",
      icon: "Location",
      hide: false,
    },
    component: () => import("../components/PageView.vue"),
    redirect: "/views/table",
    children: [
      {
        path: "/views/table",
        component: () => import("../pages/table/index.vue"),
        meta: {
          title: "基础表格",
          icon: "Edit",
          hide: false,
        },
        buttonArr: [
          {
            text: "导出",
            flag: "base-table-export",
          },
          {
            text: "添加",
            flag: "base-table-add",
          },
        ],
      },
    ],
  },
  {
    path: "/btnPermiss",
    name: "btnPermiss",
    meta: {
      title: "按钮权限",
      icon: "Location",
      hide: false,
    },
    component: () => import("../components/PageView.vue"),
    redirect: "/btnPermiss/userPage",
    children: [
      {
        path: "/btnPermiss/userPage",
        name: "userPage",
        meta: {
          title: "用户页面",
          icon: "UserFilled",
          hide: false,
        },
        component: () => import("../pages/userPage/index.vue"),
      },
      {
        path: "/btnPermiss/orderPage",
        name: "orderPage",
        meta: {
          title: "订单页面",
          icon: "Operation",
          hide: false,
        },
        component: () => import("../pages/orderPage/index.vue"),
      },
    ],
  },
];

export default routes;

3、面包屑组件应用

将面包屑组件引入到视图主区域中，代码如下：

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <menu-list />
      </el-aside>
      <el-container>
        <el-header>SMY后台管理系统</el-header>
        <el-main>
         <!-- 这边是面包屑组件的应用，关键之处 --> 
          <bread />
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import MenuList from "./MenuList.vue";
import Bread from "./Bread.vue";
</script>

<style>
.common-layout {
  height: 100vh;
}
.el-container {
  height: 100%;
}
.el-header {
  line-height: 60px;
  background: #f1eeee;
}
</style>

三、运行结果 

 下图是面包屑组件应用的展示，最末尾级别的路由不可以进行跳转

 图一  面包屑运行效果