vue 封装面包屑组件教程

首先我们来介绍一下什么是面包屑(Breadcrumb)组件。面包屑组件是一种常用的导航方式，它能够让用户清楚地知道自己当前所处的位置以及所访问的路径。在前端框架中，Vue也提供了非常方便的封装方式来实现面包屑组件。

接下来，我们将按照以下步骤进行Vue面包屑组件的封装：

1. 创建面包屑组件

首先，在Vue项目中创建一个面包屑组件，它的基本结构如下：

<template>
  <ul class="breadcrumb">
    <li v-for="(crumb, index) in crumbs" 
        :key="index"
        :class="{active: index === crumbs.length - 1}">
      <router-link :to="crumb.to">{{crumb.label}}</router-link>
      <span v-if="index !== crumbs.length - 1" class="divider"></span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    routes: {
      type: Array,
      default: []
    }
  },
  computed: {
    crumbs () {
      const routes = this.routes
      const crumbs = [{ label: '首页', to: '/' }]
      let path = ''
      for (let i = 0; i < routes.length; i++) {
        const route = routes[i]
        if (route.path === '/') {
          continue
        }
        path += `/${route.path}`
        const crumb = {
          label: route.meta.title,
          to: path
        }
        crumbs.push(crumb)
      }
      return crumbs
    }
  }
}
</script>

<style>
.breadcrumb li {
  display: inline-block;
}

.breadcrumb .active {
  color: #888;
}

.breadcrumb .divider {
  padding: 0 5px;
  color: #ccc;
}
</style>

这个组件包含了三个主要的部分：

• 模板(template) — 布局结构和样式
• 脚本(script) — 定义组件的行为和交互
• 样式(style) — 设置组件的样式

2. 注册面包屑组件

在Vue项目中使用封装好的面包屑组件之前，需要将其注册到Vue实例中。这可以通过在main.js中进行如下操作来实现：

import Vue from 'vue'
import Breadcrumb from './components/Breadcrumb.vue'

Vue.component('Breadcrumb', Breadcrumb)

在这里，我们将Breadcrumb组件注册到Vue实例中，然后就可以在其他Vue组件中使用它了。

3. 在路由中定义meta信息

为了让面包屑组件能够自动获取当前页面的路径信息，需要在路由中定义meta信息。可以通过在route.js中添加如下定义来实现：

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        title: '首页'
      },
      component: Home
    },
    {
      path: '/blog',
      name: 'blog',
      meta: {
        title: '博客'
      },
      component: Blog
    },
    {
      path: '/blog/:id',
      name: 'article',
      meta: {
        title: '文章详情'
      },
      component: Article
    }
  ]
})

在这里，我们通过添加meta标签来为每个路由定义了标题信息。这些标题信息将被面包屑组件自动识别并生成对应的面包屑导航。

4. 在Vue组件中使用面包屑组件

最后，我们可以在Vue组件中使用已经注册的面包屑组件了。在下面的示例中，我们将用面包屑组件来显示当前博客详情页面的导航路径。

<template>
  <div>
    <Breadcrumb :routes="routes" />
    <!-- 其他组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'Article',
  computed: {
    routes () {
      return [{ path: '/blog', meta: { title: '博客' }}, this.$route]
    }
  }
}
</script>

在这个示例中，我们通过使用<Breadcrumb>标签来引用已经注册的面包屑组件。同时，我们将博客详情页面的路由信息作为routes属性传递给面包屑组件。通过这种方式，面包屑组件就能够自动分析当前的路由信息，并生成对应的面包屑导航了。

5. 另一个示例

在这里，我们再提供一个面包屑组件的示例。这个示例将用面包屑组件来显示当前商品详情页面的导航路径。

<template>
  <div>
    <Breadcrumb :routes="routes" />
    <!-- 其他组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'Product',
  computed: {
    routes () {
      return [{ path: '/shop', meta: { title: '商城' }}, { path: '/shop/detail', meta: { title: '商品列表' }}, this.$route]
    }
  }
}
</script>

在这个示例中，我们同样使用了<Breadcrumb>标签来引用已经注册的面包屑组件。同时，我们将商品详情页面的路由信息作为routes属性传递给面包屑组件，以便组件能够自动生成正确的面包屑导航。