<!-- -->
<template>
<div class="breadcrumb-box bg-white px-10px">
<a-breadcrumb>
<a-breadcrumb-item v-for="(item, index) in routeBreadList" :key="item.path">
<router-link :to="item.path === '' ? '/' : { path: item.path, query: item.query }">
{
{
item.meta.title }}
</router-link>
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
<script lang='ts' setup>
import {
reactive, toRefs, ref, onMounted, watch } from 'vue'
import {
useRoute } from 'vue-router';
const route = useRoute()
const path = ref(route.path)
const routeQuery: any = reactive({
})
const query = ref(route.query)
const routeBreadList: any = ref([])
onMounted(()=>{
getBreadcrumb()
})
watch(route, () => {
getBreadcrumb()
})
function getBreadcrumb() {
routeBreadList.value = []
path.value = route.path
query.value = route.query
const breadList: any[] = []
// 最终展示的面包屑
const routes: any[] = []
route.matched.forEach(item => {
if (item.meta.title) {
// 过滤掉一层重复的菜单
if (!routes.find(r => r.path === item.path)) {
routes.push(item)
}
}
})
routes.forEach(item => {
breadList.push(item)
if (item.path === path.value && !isEmptyObject(query)) {
routeQuery[item.path] = query
}
})
// 将访问路径对应的 query 参数传递过去,刷新的时候用得到
routeBreadList.value = breadList.map(item => {
if (routeQuery[item.path]) {
return {
...item,
query: routeQuery[item.path]
}
}
return item
})
console.log('routeBreadList', routeBreadList)
}
function isEmptyObject(value: any) {
return Object.keys(value).length === 0
}
</script>
<style lang='scss' scoped >
.breadcrumb-box {
}
</style>
vue3 面包屑
猜你喜欢
转载自blog.csdn.net/qq_42975676/article/details/130992457
今日推荐
周排行