Comment utiliser les sous-routes dans Vue Router ?

Comment utiliser les sous-routes dans Vue Router ?

Vue Router est le gestionnaire de routage officiellement fourni par Vue.js, qui est utilisé pour implémenter la fonction de routage de la page front-end. Il nous permet de passer d'une page à l'autre dans l'application et prend en charge l'utilisation imbriquée de sous-routes. Cet article présentera en détail comment utiliser le sous-routage dans Vue Router et le démontrera à travers des exemples de code.

Dans Vue Router, nous pouvons utiliser des éléments de configuration de routes pour définir des règles de routage. Dans le tableau routes, les sous-routes peuvent être déclarées imbriquées. La sous-route fait référence à un groupe de routes de sous-niveau sous la route parent, utilisées pour obtenir des sauts de page plus précis.

Ce qui suit est un exemple de code utilisant le routage enfant :

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dans le code ci-dessus, nous définissons deux composants Parent et Child, qui correspondent respectivement au routage parent et au routage enfant. Dans le tableau routes, nous utilisons l'élément de configuration children pour déclarer les routes enfants. Dans cet exemple, le chemin de la route parent est '/' et le chemin de la route enfant est 'child', correspondant respectivement aux composants Parent et Child.

Dans le composant parent Parent, nous devons ajouter une balise pour restituer le contenu de la route enfant. Cette balise est <router-view>. Après avoir ajouté la balise <router-view> au modèle du composant parent, le composant enfant sera rendu à cette position.

Ce qui suit est un exemple de code du composant Parent :

<!-- Parent.vue -->
<template>
  <div>
    <h2>父级路由</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

Dans le modèle du composant Parent, nous pouvons ajouter d'autres contenus, comme un titre. Restituez ensuite le contenu de la sous-route via la balise <router-view> De cette façon, le composant correspondant au sous-itinéraire sera affiché dans le composant Parent.

Ce qui suit est un exemple de code du composant Child :

<!-- Child.vue -->
<template>
  <div>
    <h3>子级路由</h3>
    <p>这是子级路由的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

Dans le modèle du composant Child, nous pouvons personnaliser le contenu de la sous-route. Ceci n'est qu'un exemple simple, vous pouvez définir un contenu de sous-routage plus complexe en fonction des besoins réels.

Enfin, utilisez le constructeur VueRouter dans main.js pour créer une instance de routage et y configurer les règles de routage précédemment définies. Ensuite, transmettez l'instance de routage dans l'instance Vue et montez l'instance Vue sur la page via la méthode $mount.

Maintenant, nous pouvons exécuter le code et voir l'effet. Lors de l'accès au chemin '/', le contenu de la route parent Parent sera affiché et le contenu de la route enfant Child sera rendu à la position de la balise <router-view>

Pour résumer, les sous-routes de Vue Router peuvent être définies via l'élément de configuration enfants dans le tableau routes. La route parent restitue le contenu de la route enfant via la balise <router-view> Dans le développement réel, les sous-routes peuvent être utilisées de manière flexible en fonction des besoins pour réaliser des sauts de page et une imbrication de composants plus complexes.

J'espère que cet article pourra vous aider à comprendre et à utiliser la fonction de sous-routage dans Vue Router. Si vous avez des questions ou des partages, veuillez les laisser dans la zone de commentaires.

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!