VUE3開發基礎：使用Vue.js外掛程式封裝麵包屑元件

麵包屑（Breadcrumb）是一種常用的導航方式，在讓使用者了解自己所處位置的同時，也為使用者提供了返回上級選單的功能。本文將介紹如何使用Vue.js外掛程式封裝麵包屑元件。

一、準備工作

在使用Vue.js外掛程式封裝麵包屑元件之前，需要先安裝Vue.js及Vue CLI，並在專案中引入Vue Router。

二、建立麵包屑外掛程式

1. 建立外掛程式檔案

#首先，在專案中建立用於封裝麵包屑元件的外掛文件，例如"breadcrumb.js"。

2. 編輯外掛程式碼

在"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() 方法將其包裝成一個可重複使用的元件。

3. 定義麵包屑元件

現在，我們可以建立一個 "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，用於動態傳入麵包屑資料。

4. 註冊外掛程式

最後，我們需要將麵包屑外掛程式註冊到我們的Vue 專案中，如下所示：

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

現在，我們就可以在專案中使用Vue.use() 方法來安裝麵包屑插件了。在需要使用麵包屑的元件中，我們可以這樣呼叫插件：

<breadcrumb :items="breadcrumbItems"/>

在上述程式碼中，我們將麵包屑所需的資料作為 props 傳入麵包屑元件。

三、使用麵包屑插件

現在，我們已經成功地封裝了一個麵包屑元件的插件，接下來我們就可以在專案中使用它了。

1. 建立頁面

我們可以建立一個基本的頁面，用來測試麵包屑元件的效果。例如：

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

在上述程式碼中，我們建立了一個名為 "page1" 的頁面，其中包含兩個子頁面。接下來，我們將在麵包屑中展示頁面的層級關係。

2. 設定路由

在 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"欄位來新增更多麵包屑項目。

3. 展示麵包屑

現在，我們可以在頁面中展示麵包屑了。我們可以透過以下方式取得目前頁面的麵包屑項目：

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 陣列傳回，以便在麵包屑組件中展示。

4. 效果顯示

完成以上配置後，我們就可以在頁面中展示麵包屑了。以下是 "subpage1" 頁的麵包屑效果：

页面一 / 子页面一

當使用者點選麵包屑項目時，我們也可以使用 Vue Router 的路由跳轉功能，讓使用者快速回到上一層選單。

四、總結

在本文中，我們介紹如何使用Vue.js外掛程式封裝麵包屑元件。透過封裝，我們可以將麵包屑組件作為一個獨立的模組，使其在整個專案中更易於管理和重複使用。同時，麵包屑組件也為使用者提供了方便的導航和返回功能，提高了使用者體驗。

以上是VUE3開發基礎：使用Vue.js外掛程式封裝麵包屑元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！