Comment obtenir l'effet d'actualisation avant et arrière sans actualisation 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()
})

La dernière interface qui doit être mise en cache est enveloppée avec keep-alive , de sorte que l'effet de rafraîchissement en allant de l'avant et de non rafraîchissement en allant le retour peut être atteint.

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Vue.js 2.0 Implémentation de la fonction de prévisualisation du téléchargement d'images compressées pour prendre des photos sur le terminal mobile

vue2.0 Plus d'exemples d'implémentation de l'actualisation déroulante et du chargement pull-up sur mobile

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!