vue+elementUI面包屑组件封装方法详解

下面是“vue+elementUI面包屑组件封装方法详解”的攻略：

一、什么是面包屑组件及其用途

在前端开发中，面包屑组件是一种比较常见的页面导航方式，它可以帮助用户了解自己当前所处的位置，能够提高用户的使用友好度。例如，在一个电商网站中，用户在不同的分类页面浏览商品时，面包屑能够方便地帮助用户返回到上级分类页面。

在 Vue + ElementUI 中，ElementUI 组件库提供了 Breadcrumb 面包屑组件，我们在使用过程中可以按照业务需求进行定制化封装。

二、ElementUI Breadcrumb 面包屑组件的基本用法

在 ElementUI 的官方文档中，Breadcrumb 组件的用法如下：

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/documentation' }">文档中心</el-breadcrumb-item>
  <el-breadcrumb-item>面包屑</el-breadcrumb-item>
</el-breadcrumb>

以上代码中，separator 属性指定了面包屑分隔符；BreadcrumbItem 组件表示一条面包屑记录，它包含两个可选属性：to 和 replace，用于指定此面包屑链接的目标路由以及路由跳转的方式。

三、封装面包屑组件

在业务页面中，我们常常需要根据用户访问的路径来自动化地渲染面包屑，为用户提供更好的导航体验。为此，我们需要封装一个通用的面包屑组件，接收目前路由的变化来渲染当前面包屑的路径。

以下是一个简单的面包屑组件示例代码：

<template>
  <div class="breadcrumb-wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in routeList" :key="index" :to="getIndexTo(item)">
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadcrumbWrapper',
  data() {
    return {
      routeList: [],
    };
  },
  watch: {
    '$route': {
      handler(newValue, oldValue) {
        this.routeList = this.getRouteList(newValue.matched);
      },
      immediate: true,
    },
  },
  methods: {
    getRouteList(matched) {
      let routeList = matched.filter(item => item.name);
      let lastRoute = matched[matched.length - 1];
      if (!lastRoute.redirect && routeList[routeList.length - 1] !== lastRoute) {
        routeList.push({
          name: lastRoute.meta.title,
        });
      }
      return routeList;
    },
    getIndexTo(item) {
      if (item.to) {
        return item.to;
      }
      let route = {
        name: item.name,
      };
      if (item.routeParams) {
        route.params = item.routeParams;
      }
      if (item.routeQuery) {
        route.query = item.routeQuery;
      }
      return route;
    },
  },
};
</script>

以上的代码中，我们通过监听 $route 的变化来更新 routeList 状态，而 routeList 则是面包屑渲染的数据源。在 getRouteList 方法中，我们通过过滤路由表中的无效路由和加入重定向路由，来清除最后的面包屑记录。而 getIndexTo 方法则负责根据不同类型的面包屑记录生成路由跳转目标，这里配置了 to 属性和组件内部构建路由的方案两种方式。其中 routeParams 和 routeQuery 分别是给页面传递参数的途径。

四、组件的用法示例

使用封装好的面包屑组件只需要在相应的 Vue 组件中引入，并声明使用即可。以下代码是一个基于 Vue + ElementUI 的示例：

<template>
  <div class="app-container">
    <snack-bar ref="snackBar"></snack-bar>
    <app-header></app-header>
    <app-sidebar></app-sidebar>
    <div class="app-content">
      <BreadcrumbWrapper/>
      <router-view></router-view>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import BreadcrumbWrapper from '@/components/BreadcrumbWrapper';

export default {
  name: 'App',
  components: {
    BreadcrumbWrapper,
  },
};
</script>

在该示例中，我们将封装好的面包屑组件 BreadcrumbWrapper 放置在了 App 组件的中央区域，它负责渲染当前用户访问的页面所处位置的面包屑信息。

五、总结

通过以上的分析和示例说明，我们可以看出 Vue + ElementUI 面包屑组件的封装方法。在具体使用中，开发者可以根据自己的实际业务需求进行定制化的扩展和应用。