Vue et Vue-Router : Comment utiliser les paramètres de route dans les composants enfants ?

Vue et Vue-Router : Comment utiliser les paramètres de routage dans les composants enfants ?

Citation :
Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Vue-Router est le gestionnaire de routage officiel de Vue, utilisé pour implémenter des fonctions de navigation pour les applications monopage. Dans le développement d'applications, nous devons souvent transmettre des paramètres entre composants, et Vue-Router fournit un moyen simple de gérer ce problème. Cet article expliquera comment utiliser les paramètres de route dans les sous-composants de Vue et fournira des exemples de code spécifiques.

1. Configurer les paramètres de routage
Lors de l'utilisation de Vue-Router, nous pouvons configurer les paramètres de routage en définissant un chemin avec des paramètres dans la configuration de routage. Par exemple, supposons que nous ayons un composant nommé Article qui doit accepter un paramètre pour afficher un contenu d'article différent. Nous pouvons définir un chemin avec des paramètres dans la configuration de routage comme suit :

const router = new VueRouter({
  routes: [
    { path: '/article/:id', component: Article }
  ]
})

Dans le code ci-dessus, le :id dans le chemin représente un paramètre Lors de l'accès à /article/1, la valeur du paramètre id sera 1.

2. Utiliser les paramètres de routage dans les sous-composants
Dans les sous-composants de Vue, nous pouvons accéder aux paramètres de routage via l'objet $route. La méthode spécifique est la suivante :

export default {
  created() {
    console.log(this.$route.params.id)
  }
}

Dans le code ci-dessus, nous utilisons la fonction hook de cycle de vie de Vue créée pour montrer comment utiliser les paramètres de routage dans les sous-composants. this.$route.params.id affichera la valeur de l'identifiant du paramètre de route.

3. Mettre à jour dynamiquement les paramètres de routage
Parfois, nous devons afficher différents contenus en fonction de différents paramètres de routage dans le même sous-composant. Dans Vue, utilisez watch pour surveiller les modifications des paramètres de routage, puis mettez à jour les données des composants en fonction des modifications. La méthode spécifique est la suivante :

export default {
  watch: {
    '$route.params.id': function(newId, oldId) {
      this.fetchArticle(newId)
    }
  },
  methods: {
    fetchArticle(id) {
      // 根据id获取文章内容
    }
  }
}

Dans le code ci-dessus, nous utilisons l'attribut watch de Vue pour surveiller les modifications du paramètre de routage $route.params.id. Lorsque les paramètres de routage changent, la méthode fetchArticle est appelée pour obtenir le contenu de l'article correspondant.

Conclusion :
Dans Vue-Router, nous pouvons configurer les paramètres de routage en définissant un chemin avec des paramètres dans la configuration du routage. Dans les sous-composants Vue, les paramètres de routage sont accessibles via $this.$route.params. Dans le même temps, vous pouvez également utiliser l'attribut watch pour surveiller les modifications des paramètres de routage et mettre à jour les données des sous-composants en fonction des modifications.

Grâce à l'introduction et à l'exemple de code de cet article, j'espère que les lecteurs pourront mieux comprendre comment utiliser les paramètres de routage dans les sous-composants de Vue, développant ainsi les applications Vue de manière plus flexible. Dans le même temps, vous aurez également une compréhension plus approfondie de l'utilisation de Vue et Vue-Router.

Lien de référence :

• Site officiel de Vue : https://vuejs.org/
• Site officiel de Vue-Router : https://router.vuejs.org/

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!