VUE3 開発の基本: Vue.js プラグインを使用してブレッドクラム コンポーネントをカプセル化する

ブレッドクラムは一般的に使用されるナビゲーション方法であり、ユーザーが自分の位置を把握できるだけでなく、上部のメニューに戻る機能も提供します。この記事では、Vue.js プラグインを使用してブレッドクラム コンポーネントをカプセル化する方法を紹介します。

1. 準備

Vue.js プラグインを使用してブレッドクラム コンポーネントをカプセル化する前に、Vue.js と Vue CLI をインストールし、プロジェクトに Vue Router を導入する必要があります。

2. ブレッドクラム プラグインの作成

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 という名前のプロップも定義しました。

4. プラグインの登録

最後に、次のようにブレッドクラム プラグインを Vue プロジェクトに登録する必要があります:

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

これで、次のことが可能になります。プロジェクト内の Vue.use() メソッドを使用してブレッドクラム プラグインをインストールします。ブレッドクラムを使用する必要があるコンポーネントでは、次のようにプラグインを呼び出すことができます:

<breadcrumb :items="breadcrumbItems"/>

上記のコードでは、ブレッドクラムに必要なデータを小道具としてブレッドクラム コンポーネントに渡します。

3. ブレッドクラム プラグインを使用する

ブレッドクラム コンポーネント プラグインを正常にカプセル化したので、プロジェクトでそれを使用できます。

1. ページの作成

パンくずコンポーネントの効果をテストするための基本的なページを作成できます。例:

<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>

上記のコードでは、2 つのサブページを含む「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」フィールドを使用してブレッドクラム項目を定義し、ルートに保存します。 。子ルートでは、「メタ」フィールドをネストすることでさらにパンくずリストを追加できます。

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 属性をトラバースすることによって、ページに一致するすべてのルート項目を取得します。次に、各ルート アイテムのメタ フィールドを確認し、それに含まれるブレッドクラム アイテムをパンくず配列に追加します。最後に、パンくずリスト コンポーネントで表示するために、パンくず配列を返します。

4. 効果の表示

上記の設定を完了すると、ページにブレッドクラムを表示できるようになります。以下は、「subpage1」ページのブレッドクラム効果です:

页面一 / 子页面一

ユーザーがブレッドクラム項目をクリックすると、Vue Router のルーティング ジャンプ機能を使用して、ユーザーがすぐに前のページに戻ることもできます。メニュー。

4. 概要

この記事では、Vue.js プラグインを使用してブレッドクラム コンポーネントをカプセル化する方法を紹介しました。カプセル化により、ブレッドクラム コンポーネントを独立したモジュールとして扱うことができるため、プロジェクト全体での管理と再利用が容易になります。同時に、ブレッドクラム コンポーネントはユーザーに便利なナビゲーション機能と戻る機能も提供し、ユーザー エクスペリエンスを向上させます。

以上がVUE3 開発の基本: Vue.js プラグインを使用してブレッドクラム コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。