vue implémente l'effet de rafraîchissement avant

Cette fois, je vais vous présenter l'effet de rafraîchissement avancé de Vue. Quelles sont les précautions pour que Vue réalise l'effet de rafraîchissement avancé. Ce qui suit est un cas pratique, jetons un coup d'œil.

Récemment, j'essaie de réaliser des projets mobiles en utilisant vue. J'espère obtenir l'effet de rafraîchissement avant et de non-rafraîchissement arrière. C'est-à-dire que l'interface chargée peut être mise en cache (pas besoin de recharger lors du retour) et l'interface fermée peut être détruite (rechargée lors de la nouvelle entrée). Par exemple, a->b->c avance (b, c) et s'actualise, et c->b->a recule (b, a) sans s'actualiser.

Étant donné que keep-alive mettra en cache toutes les interfaces chargées, il est impossible de détruire l'interface lors du retour, ce qui entraîne que l'interface ne soit pas rechargée lors de la rentrée. Alors la première solution qui vient à l'esprit est d'appeler this.$destroy(true) pour détruire l'interface en cliquant sur le bouton retour de l'interface. Cependant, il y aura une clé de retour physique sur l'appareil mobile android Si vous revenez via la clé de retour physique, il n'y aura aucun moyen de la gérer. Bien que l'événement return d'Android puisse être réécrit pour appeler la méthode js, la méthode globale de js est appelée et l'interface supérieure ne peut pas être spécifiquement détruite.

Nous devons donc trouver un autre moyen. Heureusement, cet article m'a inspiré à garder vue-router en vie. Merci à l'auteur pour le partage.

Ce serait bien si je pouvais savoir si la route avance ou recule. Dans ce cas, je peux définir le keepAlive de la route from sur false et le keepAlive de la route to. route à true lors d'un retour en arrière Vous pouvez recharger la route dont keepAlive a été défini sur false avant d'avancer à nouveau.

Plus de bêtises, il y a trois interfaces simulées ici, connectez-vous au serveur principal.

Tout d'abord, j'ai défini une relation hiérarchique stricte pour les chemins de ces trois routes d'interface, et j'ai défini keepAlive sur true, ce qui nécessite une mise en cache par défaut.

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/login'
  },
  {
   path: '/login',
   component: Login,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server',
   component: ServerList,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server/main',
   component: Main,
   meta: {
    keepAlive: true
   }
  }
 ]
})

Étant donné que les chemins de ces trois interfaces sont à des niveaux différents, je peux utiliser le hook beforeEach pour déterminer quand revenir en arrière. Lors du retour, définissez le keepAlive de la route from sur false et le keepAlive de la route to sur true.

router.beforeEach((to, from, next) => {
 const toDepth = to.path.split('/').length
 const fromDepth = from.path.split('/').length
 if (toDepth < fromDepth) {
  console.log(&#39;后退。。。&#39;)
  from.meta.keepAlive = false
  to.meta.keepAlive = true
 }
 next()
})

L'interface finale qui doit être mise en cache est enveloppée avec keep-alive , de sorte que l'effet de rafraîchissement lors de l'avancée et de non rafraîchissement lors du retour puisse être obtenu.

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 这里是不被缓存的视图组件 -->
    </router-view>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Un résumé des méthodes d'optimisation du code jQuery

Comment gérer l'affichage incomplet des pages dans le navigateur 360 mode de compatibilité

box-reflect pour obtenir un effet de réflexion

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!