在 Vue 3 中的 Vue.js 中创建动态面包屑导航

Question

我目前正在尝试在 Vue.js 3 中创建面包屑组件。我在谷歌上搜索了这个问题几个小时，但我似乎找不到适合我的解决方案，它们要么不够动态，要么不会为我工作，因为他们太老了。一般来说，我对前端开发还很陌生，所以我不太了解要使用什么库，或者 Vue 是否提供任何功能来帮助我解决问题，现在我正在使用 Vue3 和 pinia .

这是我当前（不是最终）的解决方案：

面包屑.vue

<template>
    <div id="breadcrumb">
        <ul class="breadcrumb-wrapper">
            <li v-for="(breadcrumb, index) in breadcrumbList" :key="index" @click="navigate(index)"
                :class="{ 'linked': !!breadcrumb.link }">
                {{ breadcrumb.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Breadcrumb',
    data() {
        return {
            breadcrumbList: []
        }
    },
    mounted() { this.updateList() },
    watch: { '$route'() { this.updateList() } },
    methods: {
        navigate(route) {
            if (this.breadcrumbList[route].link) this.$router.push(this.breadcrumbList[route].link)
        },
        updateList() { this.breadcrumbList = this.$route.meta.breadcrumb }
    }
}
</script>

并在我的路由器中使用这些类型的条目：

router.js

{
  path: "/building/:slug-:id",
  name: "building-detail",
  component: BuildingDetail,
  meta: {
    breadcrumb: [
      { name: 'buildings', link: 'buildings' },
      { name: 'campus-detail', link: 'campus-detail' },
      { name: 'buildings-detail' }
    ]
  }
},

这里我需要找到一种方法来动态更新名称以及链接以匹配不同的页面。

我认为这会起作用，但不知怎的，这感觉“错误”？必须有一个解决方案，我可以动态“存储”我需要的一些数据以及网址并将它们传递到下一页。我觉得我缺少一些重要的东西，这应该不难实现，但我似乎找不到它。

有人实施过类似的事情并可以帮助我吗？

Answer 1

Your Breadcrumb.vue file would look like this.

<template>
  <div>
    `enter code here` <Breadcrumb />
    <!-- Your other content -->
  </div>
</template>

<script>
  import Breadcrumb from "@/components/Breadcrumb.vue";

  export default {
    components: {
      Breadcrumb,
    },
  };
</script>


And the Object in router.js will be like

  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      breadcrumb: 'My Home', // Custom breadcrumb label
    },
  },

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>