Quels sont les problèmes de réutilisation liés aux composants vue-router ?

Cet article présente principalement l'explication détaillée du problème de réutilisation des composants vue-router. Maintenant, je le partage avec vous et le donne comme référence.

Le système de composants est une partie importante de Vue. Il peut décomposer une abstraction de page complexe en de nombreux petits composants indépendants et réutilisables et former une application en combinant des composants. Combiné avec vue-router La fonction de routage mappe chacun. composant à l'itinéraire correspondant, indique à Vue où les restituer à travers les modifications de l'itinéraire et réalise une navigation sautée entre chaque composant et chaque page.

Problème

Lors de l'utilisation de vue-router pour changer d'itinéraire, cela déclenchera la mise à jour de l'arborescence des composants et affichera une nouvelle arborescence de composants basée sur l'itinéraire défini. Le processus de commutation approximatif est le suivant :

1. Désactiver et supprimer les composants inutiles

2. Vérifier la faisabilité du commutateur

3. Réutiliser les composants qui n'ont pas été mis à jour

4. Activer et activer de nouveaux composants

Pour le processus de contrôle de commutation de routage spécifique, veuillez vous référer à le document officiel : Switching Control pipeline

Comment vue-router détermine-t-il qu'un certain composant peut être réutilisé ? Jetons un coup d'œil à la configuration de routage suivante :

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

Il s'agit de la route qui charge la page d'article correspondante via l'ID de l'article. Lors du premier accès, le composant Post.vue sera rendu dans. l'arborescence des composants, montée Lors de l'installation du composant, le contenu de l'article est obtenu via l'ID de l'article et affiché sur la page, le paramètre de routage : postId change Selon nos attentes, le contenu du nouvel article doit. être affiché, mais cela se retourne contre vous.

Ce que nous voyons est toujours l'article précédent. Bien que les paramètres de routage aient été modifiés, vue-router pensera que vous accédez au composant Post.vue puisque le composant a déjà été rendu, il sera copié. Utilisez directement le composant précédent et n'effectuerez aucune opération dans le composant, y compris les fonctions de cycle de vie telles que le montage.

Donc, ce que nous finissons par voir, c'est le contenu du composant d'origine.

Alors, comment pouvons-nous obtenir l’effet souhaité ? Une solution efficace est présentée ci-dessous

Solution

Nous pouvons utiliser l'écouteur de surveillance pour surveiller les changements de routage et répondre en conséquence en fonction des changements dans les paramètres de routage. comme suit :

Définissez la méthode d'acquisition de données

Définissez d'abord une méthode pour obtenir des articles et obtenez les informations d'article correspondantes à partir de l'arrière-plan en fonction de l'ID de l'article.

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

Écoutez l'itinéraire

Ensuite, l'étape suivante consiste à déterminer si le composant cible est un composant Post.vue lorsque l'itinéraire est commuté. être implémenté en fonction du nom de l'itinéraire défini. Si tel est le cas, nous pouvons obtenir l'ID de l'article cible à partir des informations de routage pour mettre à jour le contenu du composant.

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

Initialisation du composant

Il est à noter ici que lorsque le composant est monté sur l'arborescence des composants pour la première fois, le suivi du routage est invalide. À ce stade, nous devons initialiser le composant dans le hook de cycle de vie monté :

mounted() {
  this.getPost(this.$route.params.postId);
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment calculer le centroïde d'un polygone en JavaScript

Comment utiliser le sélecteur de commutateur dans l'applet WeChat

Interprétation détaillée des problèmes d'erreur 404 d'Angular

Comment utiliser le composant slider dans les mini-programmes WeChat

Comment mémoriser les mots de passe sur les cookies dans vue

Mise à jour importante de la version d'AngularJS

Comment utiliser le composant de progression dans le mini programme WeChat

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!