vue3自己封装面包屑功能组件的几种方式

下面我来详细讲解一下“Vue3自己封装面包屑功能组件的几种方式”的完整攻略。

什么是面包屑组件

面包屑组件是一种常见的页面导航方式，主要用于告诉用户当前所处的页面位置以及从哪里来。在Web应用中，面包屑通常是以一串链接的形式呈现，每个链接代表一个页面，用户可以通过点击链接回到上一级页面或某个指定页面。

实现面包屑组件的方案

实现面包屑组件的方案通常包含以下几种：

1. 利用多个路由定义实现

在Vue3中，我们可以通过定义多个路由来实现面包屑组件。具体实现方法如下：

1. 在路由的meta字段中添加breadcrumb属性，该属性包含当前路由的面包屑名称和链接信息。例如：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        breadcrumb: [
          { name: 'Shop', link: '/shop' },
          { name: 'Home' },
        ]
      }
    },
    {
      path: '/shop',
      name: 'shop',
      component: Shop,
      meta: {
        breadcrumb: [
          { name: 'Shop' },
        ]
      }
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        breadcrumb: [
          { name: 'Shop', link: '/shop' },
          { name: 'About' },
        ]
      }
    },
  ],
});

1. 在面包屑组件中根据当前路由的breadcrumb属性渲染面包屑。例如：

<template>
  <div class="breadcrumb">
    <router-link v-for="(breadcrumb, index) in breadcrumbs" :key="index" :to="breadcrumb.link">{{ breadcrumb.name }}</router-link>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    const breadcrumbs = computed(() => {
      const breadcrumbList = [];

      const routes = route.matched;
      routes.forEach(route => {
        if (route.meta && route.meta.breadcrumb) {
          breadcrumbList.push(...route.meta.breadcrumb);
        }
      });

      return breadcrumbList;
    });

    return {
      breadcrumbs,
    }
  }
}
</script>

<style scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.breadcrumb a:not(:last-child)::after {
  content: '/';
  margin: 0 0.5rem;
}

.breadcrumb a:hover {
  text-decoration: underline;
}
</style>

2. 利用动态路由实现

在Vue3中，我们还可以通过定义动态路由来实现面包屑组件。具体实现方法如下：

1. 在路由的path字段中添加动态片段，例如：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/shop',
      name: 'shop',
      component: Shop,
      meta: {
        breadcrumb: [
          { name: 'Shop' },
        ]
      },
      children: [
        {
          path: ':category',
          name: 'category',
          component: Category,
          meta: {
            breadcrumb: [
              { name: 'Shop', link: '/shop' },
              { name: 'Category', link: (route) => `/shop/${route.params.category}` },
            ]
          },
          children: [
            {
              path: ':product',
              name: 'product',
              component: Product,
              meta: {
                breadcrumb: [
                  { name: 'Shop', link: '/shop' },
                  { name: 'Category', link: (route) => `/shop/${route.params.category}` },
                  { name: 'Product' },
                ]
              },
            }
          ]
        }
      ]
    },
  ],
});

1. 在面包屑组件中根据当前路由的参数渲染面包屑。例如：

<template>
  <div class="breadcrumb">
    <router-link v-for="(breadcrumb, index) in breadcrumbs" :key="index" :to="breadcrumb.link">{{ breadcrumb.name }}</router-link>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    const breadcrumbs = computed(() => {
      const breadcrumbList = [];

      const matchedRoutes = route.matched;
      matchedRoutes.forEach(matchedRoute => {
        const breadcrumb = matchedRoute.meta && matchedRoute.meta.breadcrumb;
        if (breadcrumb) {
          if (typeof breadcrumb[0].link === 'function') {
            breadcrumbList.push(...breadcrumb.map(item => {
              return {
                name: item.name,
                link: item.link(route),
              }
            }));
          } else {
            breadcrumbList.push(...breadcrumb);
          }
        } else {
          const paths = matchedRoute.path.split('/');
          paths.forEach((path, index) => {
            if (path.startsWith(':')) {
              breadcrumbList.push({
                name: route.params[path.slice(1)],
                link: `${breadcrumbList[index - 1].link}/${route.params[path.slice(1)]}`
              });
            } else {
              breadcrumbList.push({
                name: path,
                link: `${breadcrumbList[index - 1].link}/${path}`
              });
            }
          });
        }
      });

      return breadcrumbList;
    });

    return {
      breadcrumbs,
    };
  },
};
</script>

<style scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.breadcrumb a:not(:last-child)::after {
  content: '/';
  margin: 0 0.5rem;
}

.breadcrumb a:hover {
  text-decoration: underline;
}
</style>

以上就是利用多个路由定义和动态路由两种方式来实现Vue3面包屑组件的完整攻略，并且提供了两个示例。如果还有不清楚的地方，可以随时联系我。