Vue3构建组件：解构面包屑导航

2023-10-10 14:26:47

大家应该都知道网站顶部导航栏上常常会出现类似于“主页 > 资讯 > 前端开发 > Vue 3 面包屑组件”这种一串链接的导航，它的作用是用来展示当前访问页面的位置，帮助用户快速回到之前的页面，这种导航便叫做“面包屑导航”。下面就为大家分享一下使用 Vue3 封装面包屑导航组件的方法。

本文主要介绍四种面包屑组件的实现方式，具体代码如下：

方式一：使用 Vue Router 的内置导航守卫

import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    router.afterEach((to, from) => {
      // 将当前访问的路径添加到面包屑列表中
      this.$store.commit("ADD_BREADCRUMB", {
        name: to.meta.title,
        path: to.fullPath,
      });
    });
  },
};

方式二：手动监听路由变化

export default {
  data() {
    return {
      breadcrumbs: [],
    };
  },
  created() {
    this.$router.afterEach((to, from) => {
      // 将当前访问的路径添加到面包屑列表中
      this.breadcrumbs.push({
        name: to.meta.title,
        path: to.fullPath,
      });
    });
  },
};

方式三：使用全局 mixin

export default {
  beforeRouteUpdate(to, from, next) {
    // 将当前访问的路径添加到面包屑列表中
    this.$store.commit("ADD_BREADCRUMB", {
      name: to.meta.title,
      path: to.fullPath,
    });

    next();
  },
};

方式四：使用自定义组件

export default {
  props: ["breadcrumbs"],
  template: `
    <nav>
      <ul>
        <li v-for="breadcrumb in breadcrumbs" :key="breadcrumb.path">
          <router-link :to="breadcrumb.path">{{ breadcrumb.name }}</router-link>
        </li>
      </ul>
    </nav>
  `,
};