vue3面包屑导航联动

在 Vue 3 中实现面包屑导航的联动可以通过使用路由钩子和动态路由参数来实现。

首先，你需要在 Vue Router 中设置路由参数。在定义路由时，可以使用冒号(:)来定义动态参数。例如：

const routes = [
  { path: '/category/:categoryId', component: Category },
  { path: '/category/:categoryId/product/:productId', component: Product },
];

然后，在组件中，你可以使用 `$route.params` 访问路由参数。在面包屑导航组件中，你可以监听 `$route` 的变化，并根据当前路由参数来动态生成面包屑导航。

下面是一个简单的示例：

<template>
  <div>
    <ul>
      <li v-for="crumb in breadcrumbs" :key="crumb.path">
        <router-link :to="crumb.path">{{ crumb.label }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      const breadcrumbs = [];
      const { matched } = this.$route;
      
      matched.forEach(route => {
        const path = route.path;
        const label = route.meta && route.meta.breadcrumbLabel;
        
        if (label) {
          breadcrumbs.push({ path, label });
        }
      });
      
      return breadcrumbs;
    }
  }
}
</script>

在上面的示例中，我们通过监听 `$route` 的变化，在 `breadcrumbs` 计算属性中根据当前路由的 `matched` 属性来生成面包屑导航的数据。每个路由都可以设置 `meta` 字段来定义面包屑导航的标签。

在路由的定义中，你可以像下面这样设置 `meta` 字段：

const routes = [
  {
    path: '/category/:categoryId',
    component: Category,
    meta: {
      breadcrumbLabel: 'Category'
    }
  },
  {
    path: '/category/:categoryId/product/:productId',
    component: Product,
    meta: {
      breadcrumbLabel: 'Product'
    }
  }
];

这样，当路由发生变化时，面包屑导航组件会根据当前路由的 `matched` 属性动态生成面包屑导航的数据。你可以在模板中使用 `v-for` 指令来渲染面包屑导航的每个项，并使用 `router-link` 组件来生成链接。

希望这个示例对你有帮助！