vue3 监听路由变化，动态修改面包屑

vue3 setup 语法糖 监听路由变化，动态渲染面包屑。 面包屑动效为animate.css ，注意全局安装

 

 

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { RouteLocationNormalizedLoaded } from "vue-router";
import { useRouter } from "vue-router";
const { currentRoute } = useRouter();
const breadcrumbItems = ref([]);
// 监听当前路由的name变化
watch(
() => currentRoute.value,
(route: RouteLocationNormalizedLoaded) => {
const list = route.matched.filter((item) => item.name !== "index");
breadcrumbItems.value = list.map((item) => {
return item.meta.title;
});
},
{ immediate: true }
);
</script>

<template>
<el-breadcrumb separator="/">
<TransitionGroup
appear
enter-active-class="animate__animated animate__fadeInRight"
>
<el-breadcrumb-item
:key="index"
v-for="(item, index) in breadcrumbItems"
>{{ item }}</el-breadcrumb-item
>
</TransitionGroup>
</el-breadcrumb>
</template>