Comment obtenir un effet de rafraîchissement avant et de non-rafraîchissement en arrière dans vue

Cet article présente principalement l'effet de l'effet d'actualisation avant et de non-actualisation arrière de Vue, c'est-à-dire que l'interface chargée peut être mise en cache (retour sans rechargement) et l'interface fermée peut être détruite (rechargée lors d'une nouvelle entrée). Cet article partagera avec vous les idées d'implémentation. Les amis qui en ont besoin peuvent se référer à

J'ai récemment essayé 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 les appareils mobiles 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 de la couche 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 génial si je pouvais savoir si la route est en avant ou en arrière. De cette façon, je peux définir le keepAlive de la route from sur false et le keepAlive de la route to sur true en reculant. afin que je puisse définir le keepAlive de la route to sur true lorsque je continue, rechargez la route dont keepAlive a été définie sur false auparavant.

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()
})

Enveloppez l'interface finale qui doit être mise en cache avec keep-alive , et vous pourrez obtenir l'effet d'actualisation en allant de l'avant et de non-actualisation en revenant.

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

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

Articles connexes :

Expliquez en détail le problème de la mise en œuvre du rendu du serveur React

Comment écrire un graphique carrousel côté PC à l'aide jquery (Tutoriel détaillé)

Comment développer via le composant d'en-tête dans Vue (Tutoriel détaillé)

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!