vue3 面包屑

最新推荐文章于 2024-03-28 22:59:35 发布

Jay_帅小伙

最新推荐文章于 2024-03-28 22:59:35 发布

阅读量185

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/qq_42975676/article/details/130992457

版权

<!--  -->
<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>