Résolvez le problème de la page unique Vue en utilisant le retour de page keep-alive sans actualisation

Ci-dessous, je partagerai avec vous un article pour résoudre le problème de l'utilisation du retour de page keep-alive sans actualisation dans Vue single page. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

J'ai rencontré un problème très dégoûtant lors de l'utilisation de Vue pour développer un projet d'une seule page : cliquez sur une donnée sur la page de liste pour accéder à la page de détails, et lorsque j'appuie sur la touche retour pour revenir à la page de liste, la page s'actualise. L'expérience utilisateur est très mauvaise ! ! ! J'ai vérifié les problèmes associés et utilisé pour résoudre ce problème. Voici mon expérience.

est un composant intégré de Vue, qui peut conserver l'état dans la mémoire pendant le changement de composant pour empêcher le rendu répété du DOM.

Tout d'abord, il y a le code suivant sur la page App.vue Nous savons tous que c'est là que la page est rendue

<router-view></router-view>

Changement. ce code au suivant :

<keep-alive> 
<router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

Nous pouvons voir le jugement logique porté par ce code Lorsque la valeur de l'attribut keepAlive de l'attribut méta de la route est vraie, l'état de. la page est enregistrée. Dans les autres cas, le statut n'est pas enregistré.

Ensuite, nous définissons la valeur de l'attribut keepAlive pour notre itinéraire. Par exemple, j'ai défini l'attribut keepAlive sur true pour l'itinéraire sur la page d'accueil (page de liste).

{ 
name: 'index', 
path: '/index', 
title: '主页', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主页', 
keepAlive: true 
} 
}

Après avoir défini cela, l'état de la page d'accueil sera enregistré et la page n'actualisera pas les données de la demande lorsque la touche de retour reviendra à la page d'accueil.

Mais il y a un problème ! ! ! Passer de la page d'accueil à n'importe quelle page, puis revenir à la page d'accueil ne rafraîchira pas la page ! Ce n'est pas ce que je veux. Il me suffit de ne pas actualiser la page lorsque je reviens à la page de liste à partir de la page de détails. Dans d'autres cas, elle doit être actualisée, je dois donc la personnaliser. L'idée générale est de définir la valeur keepAlive de la page d'accueil sur false lors du passage de la page d'accueil à d'autres pages, et de définir la valeur keepAlive de la page d'accueil sur true lors du retour à la page d'accueil à partir de la page de détails. Le code est le suivant :

Saut de la page d'accueil Lorsque vous accédez à d'autres pages, définissez la valeur keepAlive de la page d'accueil sur false

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值，false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

Lorsque vous revenez à la page d'accueil à partir de la page de détails, définissez la valeur keepAlive de la page d'accueil sur true (vous devez faire un jugement pour déterminer si vous revenez à la page d'accueil)

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment obtenir les valeurs des paramètres de contexte à l'aide d'expressions EL dans JS

JS déplace la liste de gauche vers le Fonction Liste de droite

Utilisation de l'expression el en js et méthode de jugement non vide

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!