Grundlagen der VUE3-Entwicklung: Verwendung des Vue.js-Plug-Ins zum Kapseln von Breadcrumb-Komponenten

Breadcrumb ist eine häufig verwendete Navigationsmethode. Sie ermöglicht Benutzern nicht nur, ihren Standort zu verstehen, sondern bietet Benutzern auch die Funktion, zum vorherigen Menü zurückzukehren. In diesem Artikel wird erläutert, wie Sie das Vue.js-Plug-In zum Kapseln der Breadcrumb-Komponente verwenden.

1. Vorbereitung

Bevor Sie das Vue.js-Plug-in zum Kapseln der Breadcrumb-Komponente verwenden, müssen Sie Vue.js und Vue CLI installieren und Vue Router in das Projekt einführen.

2. Erstellen Sie ein Breadcrumb-Plug-in

1. Erstellen Sie eine Plug-in-Datei

Erstellen Sie zunächst eine Plug-in-Datei zum Kapseln der Breadcrumb-Komponente im Projekt, z.

2. Plugin-Code bearbeiten

In „breadcrumb.js“ können wir die Methode Vue.extend() verwenden, um eine Breadcrumb-Komponente zu erstellen:

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

Im obigen Code definieren wir eine Vue-Komponente namens BreadcrumbConstructor Constructor und Wrap es über die Methode Vue.extend() in eine wiederverwendbare Komponente umwandeln.

3. Breadcrumb-Komponente definieren

Jetzt können wir eine „Breadcrumb.vue“-Datei erstellen, die unsere Breadcrumb-Komponente definiert. Hier ist ein einfaches Beispiel für eine Breadcrumb-Komponente:

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

Im obigen Code verwenden wir die Router-Link-Komponente von Vue Router, um Navigationslinks zu jedem Breadcrumb-Element hinzuzufügen. Gleichzeitig haben wir auch eine Requisite namens „items“ für die dynamische Übergabe von Breadcrumb-Daten definiert.

4. Registrieren Sie das Plugin

Abschließend müssen wir das Breadcrumb-Plugin in unserem Vue-Projekt registrieren, wie unten gezeigt:

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

Jetzt können wir die Methode Vue.use() verwenden, um Breadcrumbs im Projekt-Plugin zu installieren. In. In der Komponente, die Breadcrumbs verwenden muss, können wir das Plug-in wie folgt aufrufen:

<breadcrumb :items="breadcrumbItems"/>

Im obigen Code übergeben wir die für Breadcrumbs erforderlichen Daten als Requisiten an die Breadcrumb-Komponente.

3. Verwenden Sie das Breadcrumb-Plugin

Da wir nun erfolgreich ein Breadcrumb-Komponenten-Plugin gekapselt haben, können wir es im Projekt verwenden.

1. Seite erstellen

Wir können eine einfache Seite erstellen, um die Wirkung der Breadcrumb-Komponente zu testen. Zum Beispiel:

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

Im obigen Code erstellen wir eine Seite mit dem Namen „Seite1“, die zwei Unterseiten enthält. Als nächstes zeigen wir die hierarchische Beziehung der Seite in den Breadcrumbs an.

2. Routing konfigurieren

In Vue Router können wir durch die Konfiguration des Routings eine automatische Generierung von Breadcrumbs erreichen. In der Datei „router.js“ können wir die Route beispielsweise wie folgt definieren:

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' }
            ]
          }
        }
      ]
    }
  ]
})

Im obigen Code verwenden wir das „Meta“-Feld, um das Breadcrumb-Element zu definieren und es in der Route zu speichern. In untergeordneten Routen können wir weitere Breadcrumb-Elemente hinzufügen, indem wir „Meta“-Felder verschachteln.

3. Breadcrumbs anzeigen

Jetzt können wir Breadcrumbs auf der Seite anzeigen. Wir können die Breadcrumb-Elemente der aktuellen Seite auf folgende Weise abrufen:

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

Im obigen Code erhalten wir alle Routenelemente, die mit der Seite übereinstimmen, indem wir das Attribut $route.matched durchlaufen. Anschließend überprüfen wir das Metafeld jedes Routenelements und fügen die darin enthaltenen Breadcrumb-Elemente dem Crumbs-Array hinzu. Schließlich geben wir das Crumbs-Array zur Anzeige in der Breadcrumbs-Komponente zurück.

4. Effektanzeige

Nach Abschluss der obigen Konfiguration können wir Breadcrumbs auf der Seite anzeigen. Das Folgende ist der Breadcrumb-Effekt der Seite „subpage1“:

页面一 / 子页面一

Wenn der Benutzer auf das Breadcrumb-Element klickt, können wir auch die Routing-Jump-Funktion von Vue Router verwenden, um dem Benutzer eine schnelle Rückkehr zum vorherigen Menü zu ermöglichen.

4. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man das Vue.js-Plug-in zum Kapseln der Breadcrumb-Komponente verwendet. Durch die Kapselung können wir die Breadcrumb-Komponente als unabhängiges Modul behandeln, was die Verwaltung und Wiederverwendung im gesamten Projekt erleichtert. Gleichzeitig bietet die Breadcrumb-Komponente den Benutzern auch praktische Navigations- und Rückkehrfunktionen und verbessert so das Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonGrundlagen der VUE3-Entwicklung: Verwendung des Vue.js-Plug-Ins zum Kapseln von Breadcrumb-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!