面包屑（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 数组返回，以便在面包屑组件中展示。
- 效果展示
完成以上配置后，我们就可以在页面中展示面包屑了。以下是 "subpage1" 页的面包屑效果：
页面一 / 子页面一
在用户点击面包屑项时，我们也可以使用 Vue Router 的路由跳转功能，让用户快速回到上一级菜单。
四、总结
在本文中，我们介绍了如何使用Vue.js插件封装面包屑组件。通过封装，我们可以将面包屑组件作为一个独立的模块，使其在整个项目中更易于管理和复用。同时，面包屑组件也为用户提供了方便的导航和返回功能，提高了用户体验。
