Comment afficher les routes enfants dans les routes parents dans vue

Vue.js est un framework JavaScript moderne permettant de créer des applications Web d'une seule page. Il fournit des fonctionnalités utiles telles que le routage. En utilisant Vue Router, nous pouvons facilement gérer la navigation et l'état dans notre application.

Dans le routeur Vue, les itinéraires sont organisés dans une arborescence. Nous créons une route parent et quelques routes enfants, puis les regroupons. De cette façon, nous pouvons organiser différentes parties de page ensemble et les afficher sur différentes pages de l'application principale.

De manière générale, les itinéraires enfants ne seront pas affichés dans les itinéraires parents. Au lieu de cela, nous les combinons ensemble et les restituons finalement sur la route racine de l'application principale. Ce processus peut être réalisé grâce à la fonctionnalité « vue nommée » du routage Vue.

Named Views est une fonctionnalité de Vue Router qui nous permet de restituer plusieurs vues dans un seul composant routé. Dans ce cas, chaque vue possède un nom unique et peut être utilisée dans le composant parent.

À l'aide de vues nommées, nous pouvons restituer les composants de routage enfants à des positions spécifiques dans les composants de routage parents. Cet emplacement est identifié par une balise de vue nommée portant le même nom.

Par exemple, supposons que nous ayons une route parent avec trois routes enfants : Accueil, À propos, Contact. Nous pouvons les combiner ensemble en utilisant le code suivant :

<template>
  <div>
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>

    <main>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view name="contact"></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  components: {}
}
</script>

Dans le code ci-dessus, nous avons utilisé trois balises de vue nommées et les avons nommées "home", "about" et "contact". Ce nom peut être transmis au composant enfant à l'aide d'accessoires et utilisé dans le composant enfant.

Ensuite, dans nos composants enfants, nous pouvons utiliser l'objet de configuration de route pour spécifier quel composant doit être rendu dans quelle vue nommée. Par exemple :

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HomeComponent,
        home: SidebarComponent
      }
    },
    {
      path: '/about',
      components: {
        default: AboutComponent,
        about: SidebarComponent
      }
    },
    {
      path: '/contact',
      components: {
        default: ContactComponent,
        contact: SidebarComponent
      }
    }
  ]
})

Dans le code ci-dessus, nous avons spécifié une vue nommée pour chaque route enfant. Par exemple, dans la route « home », nous avons utilisé les composants « sidebar » et les avons placés dans la vue nommée « home ». De même, nous les utilisons dans les routes « à propos » et « contact » et les plaçons dans la vue nommée de la réponse.

En conclusion, en utilisant le routeur de Vue.js, nous pouvons facilement gérer la navigation et l'état dans notre application. Grâce à l'utilisation de vues nommées, nous pouvons restituer les composants de routage enfants à un emplacement spécifique du composant de routage parent. Cela nous permet de créer des applications complexes d’une seule page et de les gérer de manière claire et organisée.

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!