vue même saut de route rafraîchissement forcé

Vue est un framework JavaScript très populaire pour développer des applications monopage (SPA). Vue Router est indispensable lors du développement d'applications monopage. Vue Router est le gestionnaire de routage officiellement fourni par Vue.js, permettant aux développeurs de définir facilement des itinéraires, des vues et des comportements pour gérer les requêtes de navigation.

Vue Router ne recharge pas le contenu de la page par défaut lors du saut entre les mêmes itinéraires, mais lit le contenu précédemment chargé depuis le cache. Bien que cette méthode puisse améliorer les performances, dans certains cas, les développeurs doivent forcer l'actualisation de la page, par exemple lorsque les dernières données doivent être affichées immédiatement après la mise à jour du contenu de la page.

Cet article explique comment forcer l'actualisation du même itinéraire dans Vue.

Description du problème

Dans Vue Router, si nous sautons entre le même itinéraire, Vue ne restituera pas le composant, ce qui signifie que le hook de cycle de vie du composant La fonction ne le fera pas être déclenché à nouveau. Cela signifie que si nous voulons que les données du composant restent synchronisées avec le backend, nous devons ajouter une logique de mise à jour manuellement.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

Dans cet exemple, nous appelons manuellement la fonction updateData pour mettre à jour les données du message afin de garantir qu'elles sont synchronisées avec le backend. Bien que cette approche puisse résoudre le problème, appeler manuellement la fonction de mise à jour à chaque fois qu'un saut est effectué peut devenir fastidieux, d'autant plus que l'application devient plus complexe.

Solution

Vue Router possède une variable globale intégrée nommée $route, qui contient les informations de routage actuelles. Nous pouvons détecter les changements d'itinéraire en suivant $route et forcer l'actualisation du composant lorsque l'itinéraire change.

Nous pouvons enregistrer l'écouteur $route dans la fonction hook de cycle de vie créée ou montée du composant, puis forcer l'actualisation de la page lorsque $route change.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
    this.$router.afterEach((to, from) => {
      if (to.path === from.path) {
        this.$nextTick(() => {
          location.reload()
        })
      }
    })
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

Dans cet exemple, nous avons enregistré l'écouteur $route dans le hook de cycle de vie monté et forcé un rafraîchissement de la page lorsqu'un changement de route a été détecté. Nous utilisons to.path et from.path pour comparer si l'itinéraire actuel est le même que l'itinéraire précédent. S'ils sont identiques, il peut être déterminé que l'utilisateur actualise l'itinéraire actuel. À ce moment-là, nous pouvons forcer l'actualisation de la page via la fonction location.reload().

Il est à noter que nous avons utilisé la fonction $nextTick() de Vue avant de forcer l'actualisation de la page. Cette fonction peut différer la fonction de rappel jusqu'à ce que le DOM soit mis à jour pour garantir que les données ont été complètement mises à jour. Si vous n'utilisez pas la fonction $nextTick() mais forcez directement l'actualisation de la page, cela peut entraîner un rendu de page incomplet ou une mise à jour des données retardée.

Résumé

Lors du développement d'applications Vue monopage, nous devons souvent passer d'un itinéraire à l'autre. Par défaut, Vue ne restitue pas les composants, ce qui peut entraîner une désynchronisation du contenu de la page avec les données back-end. En surveillant les changements de $route dans Vue Router, nous pouvons détecter les sauts entre les mêmes itinéraires et forcer l'actualisation de la page lors du saut, résolvant ainsi le problème de désynchronisation des donné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!