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>