vue3面包屑动态显示产品名称

在Vue3中，实现面包屑导航（Breadcrumbs）动态显示产品名称通常涉及组件化的设计和数据绑定。首先，创建一个基础的面包屑组件，它接收当前路由路径作为props，然后通过递归或者循环遍历路径，找到对应的产品名称。

1. 定义一个`BreadcrumbItem`组件，接受`name`和`to`属性，用于表示单个导航链接和跳转目标。

<template>
  <li v-if="to">
    <router-link :to="{ name: to.name }">{{ name }}</router-link>
    <span v-if="!$last">/</span>
  </li>
</template>

<script>
export default {
  props: ['name', 'to'],
};
</script>

2. 在主应用组件如`ProductList`或`AppLayout`中，监听`route`变化，获取到完整的路径数组，并渲染成面包屑。

<template>
  <div>
    <breadcrumb :links="getBreadCrumbs"></breadcrumb>
    <!-- 产品列表等内容 -->
  </div>
</template>

<script>
import Breadcrumb from './Breadcrumb.vue';

export default {
  components: { Breadcrumb },
  computed: {
    getBreadCrumbs() {
      const crumbs = this.$route.path.split('/').slice(1);
      return crumbs.map((item, index) => ({
        name: item,
        to: { name: `product_${index + 1}` }, // 使用动态命名，可以根据实际需求调整
      }));
    },
  },
};
</script>

在这个例子中，每当路由发生变化，`getBreadCrumbs`计算属性会更新，反映新的产品名称。记得在后端提供相应的API或路由配置，以便`product_1`、`product_2`等对应真实的产品数据。