Bases du développement VUE3 : utilisation du plug-in Vue.js pour encapsuler les composants du fil d'Ariane

Le fil d'Ariane est une méthode de navigation couramment utilisée. Elle permet non seulement aux utilisateurs de comprendre leur emplacement, mais offre également aux utilisateurs la fonction de revenir au menu précédent. Cet article explique comment utiliser le plug-in Vue.js pour encapsuler le composant fil d'Ariane.

1. Préparation

Avant d'utiliser le plug-in Vue.js pour encapsuler le composant fil d'Ariane, vous devez installer Vue.js et Vue CLI et introduire Vue Router dans le projet.

2. Créez un plug-in de fil d'Ariane

1. Créez un fichier de plug-in

Tout d'abord, créez un fichier de plug-in pour encapsuler le composant de fil d'Ariane dans le projet, tel que "breadcrumb.js".

2. Modifier le code du plugin

Dans "breadcrumb.js", nous pouvons utiliser la méthode Vue.extend() pour créer un composant fil d'Ariane :

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

Dans le code ci-dessus, nous définissons un composant Vue nommé BreadcrumbConstructor Constructor et enveloppons dans un composant réutilisable via la méthode Vue.extend().

3. Définir le composant fil d'Ariane

Maintenant, nous pouvons créer un fichier "Breadcrumb.vue" qui définit notre composant fil d'Ariane. Voici un exemple de composant de fil d'Ariane de base :

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

Dans le code ci-dessus, nous utilisons le composant router-link de Vue Router pour ajouter des liens de navigation à chaque élément de fil d'Ariane. Dans le même temps, nous avons également défini un accessoire nommé items pour transmettre dynamiquement les données du fil d'Ariane.

4. Enregistrez le plugin

Enfin, nous devons enregistrer le plugin Breadcrumb dans notre projet Vue, comme indiqué ci-dessous :

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

Maintenant, nous pouvons utiliser la méthode Vue.use() pour installer le fil d'Ariane dans le projet Plug- dans. Dans le composant qui doit utiliser le fil d'Ariane, nous pouvons appeler le plug-in comme ceci :

<breadcrumb :items="breadcrumbItems"/>

Dans le code ci-dessus, nous transmettons les données requises pour le fil d'Ariane dans le composant fil d'Ariane en tant qu'accessoires.

3. Utilisez le plug-in de fil d'Ariane

Maintenant que nous avons encapsulé avec succès un plug-in de composant de fil d'Ariane, nous pouvons l'utiliser dans le projet.

1. Créer une page

Nous pouvons créer une page de base pour tester l'effet du composant fil d'Ariane. Par exemple :

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

Dans le code ci-dessus, nous créons une page nommée "page1" qui contient deux sous-pages. Ensuite, nous afficherons la relation hiérarchique de la page dans le fil d'Ariane.

2. Configurer le routage

Dans Vue Router, nous pouvons réaliser la génération automatique de fil d'Ariane en configurant le routage. Par exemple, dans le fichier "router.js", on peut définir la route comme ceci :

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

Dans le code ci-dessus, nous utilisons le champ "meta" pour définir le fil d'Ariane et le stocker dans la route. Dans les routes enfants, nous pouvons ajouter plus d'éléments de fil d'Ariane en imbriquant les champs « méta ».

3. Affichage du fil d'Ariane

Maintenant, nous pouvons afficher le fil d'Ariane sur la page. Nous pouvons obtenir les éléments du fil d'Ariane de la page actuelle de la manière suivante :

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

Dans le code ci-dessus, nous obtenons tous les éléments de route correspondant à la page en parcourant l'attribut $route.matched. Nous vérifions ensuite le champ méta de chaque élément de route et ajoutons les éléments de fil d'Ariane qu'il contient au tableau crumbs. Enfin, nous renvoyons le tableau crumbs pour l'afficher dans le composant breadcrumbs.

4. Affichage des effets

Après avoir terminé la configuration ci-dessus, nous pouvons afficher le fil d'Ariane sur la page. Voici l'effet fil d'Ariane de la page « subpage1 » :

页面一 / 子页面一

Lorsque l'utilisateur clique sur l'élément du fil d'Ariane, nous pouvons également utiliser la fonction de saut d'itinéraire de Vue Router pour permettre à l'utilisateur de revenir rapidement au menu précédent.

4. Résumé

Dans cet article, nous avons présenté comment utiliser le plug-in Vue.js pour encapsuler le composant fil d'Ariane. Grâce à l'encapsulation, nous pouvons traiter le composant fil d'Ariane comme un module indépendant, ce qui facilite sa gestion et sa réutilisation tout au long du projet. Dans le même temps, le composant fil d'Ariane offre également aux utilisateurs des fonctions de navigation et de retour pratiques, améliorant ainsi l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!