麵包屑（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外掛程式封裝麵包屑元件。透過封裝，我們可以將麵包屑組件作為一個獨立的模組，使其在整個專案中更易於管理和重複使用。同時，麵包屑組件也為使用者提供了方便的導航和返回功能，提高了使用者體驗。
以上是VUE3開發基礎：使用Vue.js外掛程式封裝麵包屑元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
