vue 面包屑导航组件封装

实现 Vue 面包屑导航组件封装的过程中，可以按照如下步骤进行：

第一步：创建面包屑组件

1. 创建面包屑组件 Breadcrumb.vue 文件
2. 在 Breadcrumb.vue 文件中编写模板和样式
3. 在 Breadcrumb.vue 文件中导出 Breadcrumb 组件

以下是 Breadcrumb.vue 文件示例：

<template>
  <div class="breadcrumb">
    <span class="breadcrumb-item" v-for="(item, index) in breadcrumbList" :key="index">{{ item.name }}</span>
  </div>
</template>

<script>
  export default {
    name: "Breadcrumb",
    props: {
      breadcrumbList: {
        type: Array,
        default: [],
      },
    },
  };
</script>

<style>
  .breadcrumb {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .breadcrumb-item {
    margin-right: 5px;
    color: #666;
    cursor: pointer;
  }

  .breadcrumb-item:hover {
    text-decoration: underline;
    color: #3c9de0;
  }

  .breadcrumb-item:last-child {
    cursor: default;
    color: #333;
    font-weight: bold;
  }
</style>

第二步：使用面包屑组件

1. 在需要使用面包屑导航的页面中引入 Breadcrumb 组件
2. 在页面中定义 breadcrumbList 数组
3. 在页面中引入路由，根据路由信息动态生成 breadcrumbList 数组
4. 将 breadcrumbList 数组以 props 的形式传递给 Breadcrumb 组件

以下是使用面包屑组件的示例：

<template>
  <div>
    <Breadcrumb :breadcrumbList="breadcrumbList" />
    <!-- 此处为页面主体内容 -->
  </div>
</template>

<script>
  import Breadcrumb from "@/components/Breadcrumb.vue";
  import { createNamespacedHelpers } from "vuex";

  const { mapState } = createNamespacedHelpers("module");

  export default {
    name: "Page",
    components: {
      Breadcrumb,
    },
    computed: {
      ...mapState(["routeList"]),
      breadcrumbList() {
        const matchedRoutes = this.$route.matched;
        return matchedRoutes.map((route) => {
          const routeName = this.routeList[route.name];
          return {
            name: routeName,
            path: route.path,
          };
        });
      },
    },
  };
</script>

在上面的示例中，breadcrumbList 数组是根据路由信息动态生成的，由于路由信息通常是存储在 Vuex 中的，所以我们使用了 Vuex 的辅助函数 mapState 来获取 Vuex 中的数据。至于 module 和 routeList 是什么，需要根据具体情况来进行修改和完善。

第三步：完善面包屑组件

1. 在 Breadcrumb.vue 文件中为面包屑导航添加点击事件
2. 在页面中监听面包屑导航的点击事件，根据面包屑导航的 path 跳转到对应的页面

以下是完善面包屑组件的示例：

<template>
  <div class="breadcrumb">
    <span
      class="breadcrumb-item"
      v-for="(item, index) in breadcrumbList"
      :key="index"
      @click="handleClick(item)"
    >
      {{ item.name }}
    </span>
  </div>
</template>

<script>
  export default {
    name: "Breadcrumb",
    props: {
      breadcrumbList: {
        type: Array,
        default: [],
      },
    },
    methods: {
      handleClick(item) {
        this.$router.push(item.path);
      },
    },
  };
</script>

<style>
  /* 样式省略 */
</style>

在上面的示例中，handleClick 方法是处理面包屑导航点击事件的方法，通过 this.$router.push 方法实现路由跳转。至于 $router 从哪里来，需要在页面中引入路由并挂载到 Vue 实例中：

import Vue from "vue";
import VueRouter from "vue-router";

import Home from "../views/Home.vue";
import About from "../views/About.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

阅读剩余 73%