Comment implémenter l'actualisation avant et arrière sans actualisation dans vue

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.

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 du re- entrant). Cet article partagera avec vous les idées de mise en œuvre. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Étant donné que keep-alive met en cache toutes les interfaces chargées, il est impossible de détruire l'interface lors du retour, ce qui fait que l'interface n'est 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>

Recommandations associées :

L'exemple de code js le plus complet pour actualiser la page actuelle en 2018

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!