如何使用vue2封装面包屑组件

Vue2 封装面包屑组件

面包屑是一种常见的导航组件，通常用于展示当前页面所处的位置，让用户随时了解自己的位置。本文将介绍如何使用 Vue2 来封装一个面包屑组件。

1. 创建面包屑组件

我们首先需要创建一个 Vue 组件来实现面包屑的功能。在这个组件中，我们需要接收一个 routes 数组作为参数，然后根据路由信息来生成面包屑。

vue

Copy

<template>
  <div class="breadcrumb">
    <ul>
      <li v-for="(route, index) in routes" :key="route.path">
        <router-link :to="route.path">{
   
   { route.meta.title }}</router-link>
        <span v-if="index !== routes.length - 1">/</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    routes: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

在这个组件中，我们使用了一个名为 routes 的 props 属性来接收路由信息。在组件的模板中，我们使用 v-for 指令来遍历 routes 数组，并生成对应的面包屑。我们使用了 router-link 组件来实现路由跳转，同时在每个面包屑之间添加了一个斜杠分隔符。

2. 使用面包屑组件

在创建好面包屑组件之后，我们可以在其他组件中使用它。例如，我们可以在 App.vue 组件中使用面包屑组件来显示当前页面所处的位置。

vue

Copy

<template>
  <div>
    <breadcrumb :routes="routes"></breadcrumb>
    <router-view></router-view>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Breadcrumb
  },
  computed: {
    routes() {
      const routes = []
      let route = this.$route
      while (route) {
        routes.unshift(route)
        route = route.parent
      }
      return routes
    }
  }
}
</script>

在这个示例中，我们在 App.vue 组件中使用了 computed 属性来计算当前页面所处的位置。我们首先定义了一个空数组 routes，然后使用 while 循环来遍历当前路由和其父路由，将它们依次添加到 routes 数组中。最终，我们将这个 routes 数组作为 props 传递给面包屑组件，从而生成对应的面包屑。

3. 总结

在本文中，我们介绍了如何使用 Vue2 来封装一个面包屑组件。通过这个组件，我们可以方便地生成各种复杂的面包屑，让用户随时了解自己的位置。同时，使用 Vue2 进行开发可以让我们更加高效地构建应用程序。