Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-09 14:19:42
original
1629 Les gens l'ont consulté

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
   }
  }
 ]
})
Copier après la connexion

É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()
})
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
vue
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal