Comment configurer des sous-itinéraires dans vue

Vue est un framework JavaScript populaire conçu sur la base du modèle MVVM, offrant un moyen simple, flexible et efficace de développer des applications Web. Le mécanisme de routage de Vue permet aux développeurs de gérer facilement plusieurs pages ainsi que le statut et l'interaction entre les pages. Cet article explique comment configurer des sous-routes dans Vue pour mieux gérer et organiser votre application Web.

1. Qu'est-ce que le sous-routage Vue ?

Un composant de routage dans Vue peut inclure un ou plusieurs sous-composants. Le routage enfant signifie qu'une configuration de routage parent peut avoir plusieurs configurations de routage enfants. Dans le système de routage de Vue, les sous-routes sont emboîtables, ce qui signifie qu'une sous-route peut avoir ses propres sous-routes, ce qui permet une meilleure organisation et gestion des différentes pages de l'application.

2. Comment configurer le sous-routage Vue ?

1. Définissez la route parent dans Vue Router

Tout d'abord, vous devez définir la route parent dans Vue Router. Une route parent peut contenir plusieurs routes enfants. Vous pouvez utiliser le code Vue Router pour définir la route parent :

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import ParentComp from './views/ParentComp.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/parent',
      name: 'parentComp',
      component: ParentComp
    }
  ]
})

Dans le code ci-dessus, deux routes sont définies : l'une est la route racine et l'autre est la route parent. Le chemin de la route parent est "/parent".

2. Ajouter des routes enfants dans le composant de la route parent

Ensuite, vous devez ajouter la route enfant dans le composant de la route parent. Vous pouvez utiliser le routage imbriqué de Vue Router pour ajouter des sous-routes. Le routage imbriqué place la configuration du sous-routage dans le composant du routage parent. La définition du routage imbriqué comprend le chemin, le nom et le composant, par exemple :

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComp',
  components: {
    ChildComp1: () => import('../components/ChildComp1.vue'),
    ChildComp2: () => import('../components/ChildComp2.vue')
  },
  data () {
    return {}
  },
  children: [
    {
      path: 'childcomp1',
      name: 'childcomp1',
      component: 'ChildComp1'
    },
    {
      path: 'childcomp2',
      name: 'childcomp2',
      component: 'ChildComp2'
    }
  ]
}
</script>

<style scoped>
.parent-comp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

Dans le code ci-dessus, un composant parent nommé ParentComp est défini, Et contient deux définitions de sous-routes. Les noms des composants de routage enfants sont ChildComp1 et ChildComp2, et les chemins sont respectivement « /parent/childcomp1 » et « /parent/childcomp2 ».

3. Utiliser des composants enfants dans les composants parents

Enfin, vous devez utiliser des composants enfants dans les composants parents afin que la page de routage enfant correspondante puisse être affichée dans le composant parent. Vous pouvez utiliser le composant de Vue Router pour afficher les composants sous l'itinéraire actuel. Vous pouvez ajouter le composant dans le modèle du composant parent, comme suit :

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

De cette façon, lorsque "/parent/childcomp1" et "/parent/childcomp2" sont accédés dans le navigateur, ChildComp1 et ChildComp2 seront affichés respectivement.

3. Résumé

Vue Router fournit une méthode de gestion des routes très flexible, notamment pour le traitement des sous-routes. En utilisant rationnellement le mécanisme de sous-routage dans le routage Vue, différentes pages des applications Vue peuvent être mieux organisées et gérées, et l'évolutivité et la maintenabilité des applications Web peuvent être améliorées.

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!