vue面包屑使用详解

前言

第一次接触这个名词的时候，我是有点懵的，心想这是个啥玩意啊？还叫面包屑？？？？怀着好奇的心我就去搜了，没想到它的由来还挺有意思的，接下来给大伙讲讲。

面包屑的来源是童话故事"《汉赛尔和格莱特》":很久很久以前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后妈。后妈计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后妈的计划，于是偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后妈顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。

看完这则童话相信大家也应该能够猜到面包屑的作用了吧？让我们用实例来附加解析一下：假如你现在位于网站首页,此时你想看看系统日志的内容，突然你发现系统日志是位于系统管理里面的，也就是说你要进入系统日志你得先进入系统管理页面。这时候面包屑的作用就出来了，它会记录你逐个进入的网页路径，使你能够清晰地看到你所进入的网页路径，以便你查看以及快速跳转回你走过的路径。以下就是我们的实例图：

vue面包屑使用详解

图上红色框框圈起来的就是面包屑了，里面的含有就是我们当前位于系统日志页面，且系统日志的父级网页是系统管理。此时我们点击面包屑中的系统管理是可以直接跳转回去系统管理页面的。这样看起来是不是非常实用呢？嘿嘿。

接下来我们来实操一下，进入代码部分。

实操

在正式带大家写代码前,我先给大家看一下我们要实现的目标效果：

vue面包屑使用详解

准备工作

在你的vue项目中的components创建一个新的vue文件breadcrumb.vue。

正式工作

第一步

我们使用的组件框架是Element plus，所以第一步我们得先上Element plus官网的组件库中找到我们的面包屑(breadcrumb)的示例代码,以下是官网链接：。

vue面包屑使用详解

我们这里选用的是图标分隔符的代码示例，我们把官方给的代码的 <template/> 部分复制下来粘贴到我们刚刚创建的breadcrumb.vue中去：

vue面包屑使用详解

但是仔细分析一下示例代码我们可以发现它的数据是静态写死的，根本无法满足我们动态显示的需求，这时候怎么办呢？这时候就有一个思路，我们可以看到图中面包屑的实例都是组件生成的，那我们此时只要用一个v-for循环获取我们的路由路径不就可以实现动态的面包屑效果了吗？好，说干就干，我们下面来按照这个思路实现一下。

<template>
 <div class="breadcrumb">
        <el-breadcrumb >
            <el-breadcrumb-item v-for="" :key="">
                <router-link :to="">{{ title }}</router-link>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</tmplate>

以上代码就是我们使用v-for循环实现的基础框架，我们将根据这个代码框架进行逐步分析讲解

第二步

上面我们的实现思路提到，要用v-for循环获取我们的路由路径，那我们就得创建一个动态的数组去存储，所以我们的代码就得这么写:

<script setup>
import {ref} from "vue";
const lists= ref([]);//创建动态数组
</script>

这时候我们用ref函数方法创建的动态数组就完成了，接下来我们要将所访问过的路由路径存入其中，那如果我们要存入路由路径，我们就得先去获取路径。我们将采用Vue自带的监听函数(watch())和生命周期函数onMounted()来实时获取路由，接下来是我们的代码实现部分：

<script setup>
import {ref,watch,onMounted} from "vue";
import {useRoute} from "vue-router"; //导入路由

const route = useRoute();//创建路由使用实例
const lists=ref([]); // 创建动态数组

//监听普通类型
watch(route,(to,from)=>{
    //直接监听
    getBreadcrumb(to.matched);
});
//生命周期挂载
 onMounted(()=>{
     getBreadcrumb(route.matched);
 })

 function getBreadcrumb(matched){
     lists.value = matched;//将获取到的路由添加进我们的动态数组中
 }
</script>

以上代码是完整实现代码，这里我来说明一下其中的含义:首先watch()、onMounted()是vue框架自带的，watch()则是对变化的网页进行监听记录其中的路由信息，里面的to参数就是记录了要前往的网页的路由信息，from参数则是记录了当前网页的路由信息。而getBreadcrumb()则是我们自定义的函数方法，将获取到的路由添加进我们的动态数组lists中，所以我们只要每次监听函数watch()函数生效的时候调用·getBreadcrumb(to.matched);即可，这样就可以把要跳转的网页路由添加进我们的动态数组lists了。还有我们的onMounted(),我对其的理解是，它就是一个初始化的方法，我们首次进入页面的时候得初始化，而它就是实现了这个功能，把最初的路由信息添加进了我们的lists数组中。

经过以上的操作之后每次页面变化的路由信息将会全部同步到lists数组中去了，接下来我们只要用v-for遍历数组即可。

对了，这里有一个小细节,上面lists.value的value方法是动态函数ref创建的数组特有的，用于将内容插入lists中去。

第三步

接下来我们将进行v-for遍历lists数组进行渲染页面。

<template>
 <div class="breadcrumb">
        <el-breadcrumb >
            <el-breadcrumb-item v-for="v in lists" :key="v.path">
                <router-link :to="v.path">{{ v.meta.title }}</router-link>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</tmplate>

v-for="v in lists"就是从lists中逐个遍历对应的路由信息。我觉得要理解这个位置我们就得看看我们lists数组中存了什么内容，下面我将从控制台打印出某个页面list的内容：

vue面包屑使用详解

可以看到每个页面都自称一个数组里面的一个索引，且内容全部对应于我们路由的创建页面router/index.js的内容：

vue面包屑使用详解

看到这里大家就明白了吧，为什么上面我们v-for遍历之后我们要调用:v.path、v.meta.title了吧？这些实际上就是我们路由创建的信息，我们填入就可以映射我们面包屑对应按钮需要的路径和标题了。

最后放一下完整的breadcrumb.vue代码给大家好好品味一下：

<template>
 <div class="breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="v in lists" :key="v.path">
                <router-link :to="v.path">{{ v.meta.title }}</router-link>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router"; //导入路由

const route = useRoute();
const lists = ref([]); //作为面包屑展示数据的数组

//监听普通类型
watch(route, (to, from) => {
  //直接监听
  getBreadcrumb(to.matched);
});

onMounted(() => { //生命周期-挂载完成
    getBreadcrumb(route.matched);
})

function getBreadcrumb(matched) {
  lists.value = matched;
  console.log(lists.value);
}
</script>