vue3面包屑导航栏

import {useRoute, useRouter} from "vue-router";
import {computed, ref, watch, watchEffect,nextTick} from "vue";
const router =  useRouter()
const route = useRoute()
const breadcrumb = ref([])
/**
 *@Date:2023-03-28 17:55:20
 *@description：监听路由动态获取面包屑路径和tag标签
 *@param{}参数说明
 *@return：返回值
 */
watch(()=>router.currentRoute.value,(newVal)=>{
//获取当前路径中matched的值赋值给 breadcrumb.value，然后v-for循环即可
//filter过滤不需要的路径
  breadcrumb.value = router.currentRoute.value.matched.filter(item=>item.path!=='/home'&&item.path!=='/')
  const result = tagMenu.value.some(item=>item.path===newVal.path)
  if(!result){
    tagMenu.value.push(newVal)
  }
  setDarkTheme()
},{immediate:true})

//也可以监听route.path二选一
watch(
  () => route.path,
  (newValue, oldValue) => {
    breadcrumb.value = route.matched
  }
);


<template>
<el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="item.path" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</template>