vue3+ElementPlus快速实现简易面包屑功能

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
 
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
 
const route = useRoute();
const breadcrumbList = ref([]);
 
watch(() => route.matched, (matched) => {
  breadcrumbList.value = matched.filter((item) => item.meta && item.meta.title);
}, { immediate: true });
</script>

这段代码使用了Vue 3的 <script setup> 语法糖，结合Element Plus的面包屑组件实现了面包屑导航的功能。它依赖于Vue Router来获取当前路由的匹配信息，并动态更新面包屑导航项。