Comment passer à la sous-route dans vue

Vue est un framework front-end populaire qui utilise une approche basée sur les composants pour créer des applications. Vue router est un plug-in fourni par Vue qui peut facilement diviser l'application en plusieurs vues et permettre aux utilisateurs de naviguer entre les vues. Dans le routeur Vue, chaque vue est une route et chaque route peut avoir plusieurs sous-routes. Cet article explique comment sauter des sous-itinéraires.

1. Déclarer des sous-routes

La déclaration de sous-routes dans le routeur Vue nécessite l'utilisation de routes imbriquées. Utilisez le champ children dans la route parent pour déclarer les routes enfants. Par exemple :

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

Dans le code ci-dessus, nous déclarons une route parent nommée parent, et une route enfant nommée child. Lorsque l'utilisateur accède à /parent/child, les composants Parent et Child seront rendus.

2. Sous-route de saut

Le routage de saut dans Vue peut utiliser le composant router-link ou la navigation programmatique à l'aide de l'objet $router. Lorsque vous sautez des sous-itinéraires, nous devons fournir le chemin de routage complet. Par exemple, pour accéder à la route enfant dans l'exemple ci-dessus, nous devons fournir le chemin complet de la route /parent/child.

Utilisez router-link :

<router-link to="/parent/child">跳转到子路由</router-link>

Utilisez la navigation par programmation :

this.$router.push('/parent/child')

Dans le code ci-dessus, nous utilisons la méthode $router.push pour accéder à l'itinéraire.

3. Passer des paramètres en navigation programmatique

En pratique, nous devons souvent passer aux sous-itinéraires et transmettre certains paramètres. Dans Vue, nous pouvons transmettre des paramètres en utilisant le champ params dans la navigation programmatique. Par exemple :

this.$router.push({ path: '/parent/child', params: { id: 1 }})

Dans le code ci-dessus, nous avons passé un paramètre id avec une valeur de 1. Dans le composant de sous-routage qui reçoit les paramètres, nous pouvons obtenir les paramètres via this.$route.params.

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

4. Conclusion

Cet article présente comment sauter des sous-itinéraires dans le routage Vue. Nous avons expliqué comment déclarer des sous-routes, comment utiliser le lien de routeur et la navigation par programmation pour accéder aux sous-routes et comment transmettre des paramètres. J'espère que cet article sera utile aux débutants.

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!