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

面包屑

引言

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

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

面包屑

上一节，我们将代码的流程 进行了梳理，也发现了 几个功能的空缺 和 bug

这一节，将缺失的功能之一，即前端的面包屑导航 先处理了。

需求

很多系统都拥有 面包屑， 那为什么要展示 面包屑 呢？

可能会觉得 左侧侧边栏 已经足够了，但相较于直观性，还是 面包屑 更好一些。

具体的是实现，以及展示在页面中的位置如下图：

实现

逻辑为每次点击 左侧的侧边栏 或者 直接通过 url 来进行访问时

头部 header 的 面包屑 会显示当前所在页面，并且点击最左侧首页，能进行跳转

可以注意到这些情况，都是发生在 路由 的处理，所以我们只需要获取到当前的 路由 即可

• 路由通过 vue-router 来进行

• 页面

  • 在这里需要用到 ElementPlus 这个UI框架 中的 Breadcrumb 面包屑 这个组件

  • 位置是在我们的 layout 布局的 header 组件页面下

  代码如下

  <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <a @click.prevent="toWorkbench">首页</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="route.name === 'workbench'"></el-breadcrumb-item>
      <el-breadcrumb-item v-else v-for="(item, index) in route.matched" :key="index">{{ item.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>
  

  // script 代码
  
  import { useRoute, useRouter } from 'vue-router'
  
  
  const router = useRouter()
  const route = useRoute()
  
  const toWorkbench = () => {
    router.push('/workbench')
  }
  

此时页面就可以正常的展示面包屑了，可以看到代码量还是很简单的，没有那么复杂，组件已经帮我们处理好了，所以能够很快完成我们所需要的功能。

总结

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

完成了，页面当中 面包屑 的部分。