la route du commutateur de routage vue ne s'actualise pas

Dans le développement de Vue, le routage est un concept très important. Il peut nous aider à changer de page et également à gérer facilement le statut des différentes pages. Lors de l'utilisation du routage Vue, parfois la page ne s'actualise pas lorsque le routage est commuté. Cet article explorera cette question sous plusieurs aspects.

1. Présentation du routage

Dans Vue, le routage est un concept très important. Le routage fait référence au chemin ou au lien utilisé lors du basculement entre les pages. En définissant des routes dans les composants Vue, nous pouvons implémenter le changement de page et la gestion des états. Les opérations d'utilisation du routage dans Vue reposent essentiellement sur le plug-in Vue Router.

2. Problème de rafraîchissement de la route

Dans le développement de Vue, on constate parfois que la page n'est pas rafraîchie lors du changement de route. Cela entraînera la non-mise à jour des données de la page, affectant ainsi l'affichage normal de la page. Alors pourquoi cela arrive-t-il ? Nous pouvons en discuter sous les aspects suivants.

1. Cache du navigateur

Le cache du navigateur signifie que le navigateur mettra automatiquement en cache certaines données lors de la visite d'un site Web afin que la page puisse être chargée plus rapidement lors de votre prochaine visite. Lorsque nous visitons la même page, le navigateur lit les données du cache au lieu de récupérer les données du serveur. Cela entraînera que les données de la page ne soient ni mises à jour ni actualisées.

Afin d'éviter cette situation, nous pouvons utiliser la méthode suivante :

Lorsque le routage est commuté, définissez un temps de cache unique pour chaque itinéraire, ce qui peut garantir que chaque accès Les données peuvent être récupérées à chaque fois au lieu de lire les données du cache du navigateur.

2.keep-alive

Il existe également un composant keep-alive dans Vue, qui peut nous aider à mettre en cache les instances de composants et à restituer les composants mis en cache si nécessaire. Si le composant keep-alive est utilisé lors du changement de route et que la durée du cache n'est pas définie, le composant ne sera pas restitué lorsque la route est changée, ce qui entraînera l'actualisation de la page.

Afin de résoudre ce problème, nous pouvons définir les attributs d'inclusion et d'exclusion sur le composant keep-alive pour contrôler quels composants doivent être mis en cache et quels composants doivent être restitués. Dans le même temps, nous pouvons également définir l'attribut max pour contrôler le nombre maximum de caches afin d'éviter un débordement de mémoire.

3. Route guard

Vous pouvez utiliser Route Guard pour gérer les problèmes lors du changement d'itinéraire. Dans la fonction de hook beforeRouteUpdate, vous pouvez déclencher la méthode personnalisée dans le composant pour réacquérir les données et actualiser la page.

Il y a quatre gardes de routage dans Vue : beforeEach, beforeResolve, afterEach et beforeRouteUpdate. La fonction de hook beforeRouteUpdate est déclenchée lorsque la route est commutée et ne sera déclenchée que lorsque le composant actuel est réutilisé. Par conséquent, nous pouvons effectuer des opérations pertinentes dans cette fonction de hook pour éviter le problème de non-actualisation de la page.

3. Solution

Pour le problème de page qui ne s'actualise pas lorsque le routage est changé, nous pouvons utiliser les solutions suivantes :

1. temps de cache.

2. Définissez les attributs d'inclusion et d'exclusion sur le composant keep-alive pour contrôler la mise en cache et le nouveau rendu du composant.

3. Utilisez la fonction de hook beforeRouteUpdate dans Route Guard pour déclencher la méthode personnalisée dans le composant.

4. Utilisez différentes méthodes de routage, comme l'utilisation de la méthode router.push au lieu de la méthode router.go.

Pour résumer, afin d'éviter le problème de ne pas actualiser la page lorsque le routage est changé, nous devons le résoudre sous plusieurs aspects. Dans le processus de développement actuel, nous devons choisir la solution la plus appropriée en fonction de la situation spécifique pour garantir l'affichage normal de la page.

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!