VUE3开发基础：使用Vue.js插件封装面包屑组件

WBOY原创: 2023-06-16 08:06:11717浏览

面包屑（Breadcrumb）是一种常用的导航方式，在让用户了解自己所处位置的同时，也为用户提供了返回上级菜单的功能。本文将介绍如何使用Vue.js插件封装面包屑组件。

一、准备工作

在使用Vue.js插件封装面包屑组件之前，需要先安装Vue.js及Vue CLI，并在项目中引入Vue Router。

二、创建面包屑插件

创建插件文件

首先，在项目中创建用于封装面包屑组件的插件文件，例如 "breadcrumb.js"。

编辑插件代码

在 "breadcrumb.js" 中，我们可以使用 Vue.extend() 方法创建一个面包屑组件：

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

const BreadcrumbConstructor = Vue.extend(Breadcrumb)

const breadcrumb = new BreadcrumbConstructor({
  el: document.createElement('div')
})

document.body.appendChild(breadcrumb.$el)

export default breadcrumb

在以上代码中，我们定义了一个名为 BreadcrumbConstructor 的 Vue 组件构造器，并通过 Vue.extend() 方法将其包装成一个可复用的组件。

定义面包屑组件

现在，我们可以创建一个 "Breadcrumb.vue" 文件，用于定义我们的面包屑组件。以下是一个基本的面包屑组件示例：

<template>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item" v-for="(item, index) in items" :key="index">
        <router-link :to="item.to">{{ item.label }}</router-link>
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: ['items']
}
</script>

<style>
/* 样式可根据需求进行调整 */
</style>

在上述代码中，我们使用了 Vue Router 中的 router-link 组件，为每个面包屑项添加了导航链接。同时，我们也定义了一个名为 items 的 props，用于动态传入面包屑数据。

注册插件

最后，我们需要将面包屑插件注册到我们的 Vue 项目中，如下所示：

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

现在，我们就可以在项目中使用 Vue.use() 方法来安装面包屑插件了。在需要使用面包屑的组件中，我们可以这样调用插件：

<breadcrumb :items="breadcrumbItems"/>

在上述代码中，我们将面包屑所需的数据作为 props 传入面包屑组件。

三、使用面包屑插件

现在，我们已经成功地封装了一个面包屑组件的插件，接下来我们就可以在项目中使用它了。

创建页面

我们可以创建一个基本的页面，用于测试面包屑组件的效果。例如：

<template>
  <div>
    <h3>页面一</h3>
    <ul>
      <li><router-link to="/page1/subpage1">子页面一</router-link></li>
      <li><router-link to="/page1/subpage2">子页面二</router-link></li>
    </ul>
  </div>
</template>

在上述代码中，我们创建了一个名为 "page1" 的页面，其中包含两个子页面。接下来，我们将在面包屑中展示页面的层级关系。

配置路由

在 Vue Router 中，我们可以通过配置路由来实现面包屑的自动生成。例如，在 "router.js" 文件中，我们可以这样定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './views/Page1.vue'
import Subpage1 from './views/Subpage1.vue'
import Subpage2 from './views/Subpage2.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/page1',
      component: Page1,
      children: [
        {
          path: 'subpage1',
          component: Subpage1,
          meta: {
            breadcrumb: [
              { label: '页面一', to: '/page1' },
              { label: '子页面一', to: '/page1/subpage1' }
            ]
          }
        },
        {
          path: 'subpage2',
          component: Subpage2,
          meta: {
            breadcrumb: [
              { label: '页面一', to: '/page1' },
              { label: '子页面二', to: '/page1/subpage2' }
            ]
          }
        }
      ]
    }
  ]
})

在上述代码中，我们使用 "meta" 字段来定义面包屑项，将其存储在路由中。在子路由中，我们可以通过嵌套"meta"字段来添加更多面包屑项。

展示面包屑

现在，我们可以在页面中展示面包屑了。我们可以通过以下方式获取当前页面的面包屑项：

computed: {
  breadcrumbItems() {
    let crumbs = []

    let matched = this.$route.matched
    matched.forEach(route => {
      if (route.meta && route.meta.breadcrumb) {
        crumbs.push(...route.meta.breadcrumb)
      }
    })

    return crumbs
  }
}

在上述代码中，我们通过遍历 $route.matched 属性，获取页面所匹配的所有路由项。然后，我们对每个路由项的 meta 字段进行检查，将其包含的面包屑项添加到 crumbs 数组中。最后，我们将 crumbs 数组返回，以便在面包屑组件中展示。