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

oknwwptz 于 2023-09-29 发布在 Java

关注(0)|答案(1)|浏览(111)

我目前正在尝试在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' }
    ]
  }
},

在这里，我需要找到一种方法来动态更新名称以及链接，以匹配不同的页面。
我认为这会起作用，但不知何故，这感觉“不对”？必须有一个解决方案，我可以动态地“存储”我需要的一些数据以及URL，并将它们传递到下一页。我觉得有一些curcial的东西，我错过了，这应该不是很难实现，但我似乎找不到它。
有没有人实现了这样的东西，可以帮助我在这里？

JavaScript

来源：https://stackoverflow.com/questions/77179580/creating-a-dynamic-breadcrumb-in-vue-js-in-vue-3

1条答案

按热度按时间

bbmckpt71#

您的Breadcrumb.vue文件将如下所示

<template>
  <nav class="breadcrumb">
    <ul>
      <li v-for="(crumb, index) in breadcrumbs" :key="index">
        <router-link :to="crumb.to">{{ crumb.label }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      const route = this.$route;
      const matchedRoutes = route.matched;

      return matchedRoutes.map((routeItem) => ({
        label: routeItem.meta.breadcrumb || routeItem.name,
        to: this.getRoutePath(route, routeItem),
      }));
    },
  },
  methods: {
    getRoutePath(route, routeItem) {
      const matchedSegments = route.matched.slice(0, route.matched.indexOf(routeItem) + 1);
      return matchedSegments.map((segment) => segment.path).join('/');
    },
  },
};
</script>

<style scoped>
/* Add your breadcrumb styling here */
</style>

您的Router.js对象将如下所示

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

赞(0）回复(0）举报 2023-09-29

我来回答

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

1条答案

相关问题

热门标签

最新问答