Comment activer la route parent dans le sous-routage vue

Vue est un framework JavaScript populaire pour créer des interfaces Web dynamiques. Il fournit des fonctionnalités utiles telles que la composantisation, le routage, etc.

Dans Vue, le routage est une fonctionnalité très utile. Vue Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js et peut facilement fonctionner avec d'autres bibliothèques ou plug-ins tiers.

Dans Vue Router, le routage est composé d'un objet de routage et d'un composant correspondant. Dans le développement réel, nous devons parfois activer la route parent dans la route enfant pour obtenir une navigation plus flexible dans les pages.

Dans cet article, nous présenterons comment activer la route parent à l'aide de la route enfant de Vue Router.

1. Définir les routes enfants dans les routes parents

Tout d'abord, nous devons définir les routes enfants dans les routes parents. Nous pouvons utiliser la fonction de sous-routage de Vue Router pour y parvenir. Par exemple :

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

Dans le code ci-dessus, nous définissons une route parent '/parent' dont le composant est Parent. Dans Parent, nous définissons une sous-route 'child' dont le composant est Child. Maintenant, nous avons configuré la route enfant dans la route parent.

2. Définissez la sortie de la sous-route dans la route parent

Ensuite, nous devons définir la sortie de la sous-route dans le composant parent. Dans Vue, les composants peuvent être imbriqués dans d'autres composants et le contenu des sous-composants peut être affiché dans les composants parents sous forme d'emplacements. Nous pouvons afficher le contenu de la route enfant en définissant un slot dans le composant parent.

Par exemple, nous pouvons ajouter une balise 975b587bf85a482ea10b0a28848e78a4 dans le modèle du composant parent pour afficher le contenu de la route enfant :

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
  </div>
</template>

3. Activer la route parent dans la route enfant

Maintenant, nous have La sous-route est définie dans la route et la sortie de la sous-route est définie dans le composant parent. L'étape suivante consiste à activer la route parent dans la sous-route.

Pour activer la route parent, nous pouvons utiliser la méthode $router.push() dans le composant de la route enfant pour accéder au chemin de la route parent. Par exemple :

// child.vue
export default {
  methods: {
    goParent() {
      this.$router.push('/parent')
    }
  }
}

Dans cet exemple, nous définissons une méthode goParent dans le composant de la route enfant. Lors de l'appel de la méthode goParent, nous utilisons la méthode $router.push() pour accéder au chemin de la route parent '/parent'.

De cette façon, nous pouvons obtenir l'effet d'activer la route parent dans la route enfant.

Résumé

Dans cet article, nous avons présenté comment activer les routes parents à l'aide de routes enfants dans Vue Router. Les étapes spécifiques sont les suivantes :

1. Définir la sous-route dans la route parent
2. Définir la sortie de la sous-route dans le composant parent
3. Utiliser la méthode $router.push() dans la sous-route pour passer au chemin de l'itinéraire parent

Grâce aux étapes ci-dessus, nous pouvons facilement obtenir l'effet d'activer l'itinéraire parent dans l'itinéraire enfant, gérant ainsi la navigation dans les pages de manière plus flexible.

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!