Comment utiliser keep-alive dans vue2

vue2.0 fournit un composant keep-alive pour mettre en cache les composants afin d'éviter de charger plusieurs fois les composants correspondants et de réduire la consommation de performances. Cet article vous présente un résumé et les précautions d'utilisation de keep-alive dans vue2. Les amis qui en ont besoin peuvent s'y référer

keep-alive est un composant intégré de Vue, qui peut conserver l'état. dans la mémoire lors du changement de composant. Empêche le rendu répété du DOM. Combiné avec vue-router, tout le contenu d'une vue peut être mis en cache.

L'utilisation de base est la suivante :

<keep-alive>
 <component>
 <!-- 该组件将被缓存！ -->
 </component>
</keep-alive>

Généralement, il y a une telle demande Lorsque nous entrons dans la page de liste pour la première fois, nous devons demander des données. page de détails de la page de liste, la page de détails ne le fait pas. Le cache doit également demander des données puis revenir à la page de liste

Il y a deux situations :

1. Cliquez directement sur le bouton retour du navigateur.

2. Cliquez sur le lien /list dans la barre de navigation pour revenir.

Dans le premier cas, lorsque l'on revient à la page de liste (/list) directement via le bouton retour, il n'est pas nécessaire de demander des données.

Dans le deuxième cas, nous devons demander des données en revenant à la page de liste via le lien.

Il y a donc trois situations ici :

1 Par défaut, la page de liste doit demander des données.

2. Après avoir accédé à la page de détails, utilisez le bouton de retour par défaut du navigateur pour revenir, ce qui ne nécessite pas de requête ajax.

3. Après avoir accédé à la page de détails et être revenu à la page de liste en cliquant sur le lien, vous devez également envoyer une requête ajax.

La configuration est la suivante :

1. Le fichier d'entrée app.vue est configuré comme suit :

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

2. set keepAlive: true pour indiquer qu'il est nécessaire Utiliser le cache Si faux, cela signifie qu'aucun cache n'est nécessaire. Et ajoutez le comportement de défilement scrollBehavior

la configuration du routeur/index.js est la suivante :

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式，才能使用 scrollBehavior
 base: '/page/app', // 配置单页应用的基路径
 routes: [
 {
  path: '/',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/list',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
  }
 },
 {
  path: '/detail',
  name: 'detail',
  component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 // 保存到 meta 中，备用
 to.meta.savedPosition = savedPosition;
 if (savedPosition) {
  return { x: 0, y: 0 };
 }
 return {};
 }
});
export default router;

3. Le code list.vue est le suivant :

<template>
 <p class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/detail">跳转到detail页</router-link>
 </p>
</template>

<script>
export default {
 name: &#39;helloworld&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  &#39;aa&#39;: 1
  };
  Promise.all([this.$store.dispatch(&#39;testUrl&#39;, obj)]).then((res) => {
  console.log(res);
  });
 }
 },
 beforeRouteEnter(to, from, next) {
 next(vm => {
  /*
  如果 to.meta.savedPosition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据
  如果savedPosition === null, 那么说明是点击了导航链接;
  此时需要刷新数据，获取新的列表内容。
  否则的话 什么都不做，直接使用 keep-alive中的缓存
  */
  if (to.meta.savedPosition === undefined) {
  vm.ajaxRequest();
  }
  if (to.meta.savedPosition === null) {
  vm.ajaxRequest();
  }
 })
 }
};
</script>

4. . détail. Le code de vue est le suivant :

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/list">返回列表页</router-link>
 </p>
</template>
<script>
export default {
 name: &#39;list&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 };
 },
 created() {
 this.ajaxRequest();
 },
 methods: {
 ajaxRequest() {
  const obj = {
  &#39;aa&#39;: 1
  };
  Promise.all([this.$store.dispatch(&#39;withdary&#39;, obj)]).then((res) => {
  console.log(res);
  });
 }
 }
};
</script>

2 : Utilisez router.meta pour étendre

Supposons qu'il y ait 3 pages. maintenant, les exigences sont les suivantes :

1. Il y a la page A par défaut, et une demande est requise pour que la page A arrive.

2. La page B passe à la page A et il n'est pas nécessaire de demander à nouveau la page A.

3. La page C passe à la page A et la page A doit être demandée à nouveau.

L'implémentation est la suivante :

Définissez l'attribut méta dans la route A :

{
 path: '/a',
 name: 'A',
 component: resolve => require(['@/views/a'], resolve),
 meta: {
 keepAlive: true // true 表示需要使用缓存
 }
}

Donc, tout le code sous routeur/index devient comme suit :

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式，才能使用 scrollBehavior
 base: '/page/app', // 配置单页应用的基路径
 routes: [
 {
  path: '/',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/list',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
  }
 },
 {
  path: '/detail',
  name: 'detail',
  component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
 },
 {
  path: '/a',
  name: 'A',
  component: resolve => require(['@/views/a'], resolve),
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/b',
  name: 'B',
  component: resolve => require(['@/views/b'], resolve)
 },
 {
  path: '/c',
  name: 'C',
  component: resolve => require(['@/views/c'], resolve)
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 // 保存到 meta 中，备用
 to.meta.savedPosition = savedPosition;
 if (savedPosition) {
  return { x: 0, y: 0 };
 }
 return {};
 }
});
export default router;

Set beforeRouteLeave

beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = true; // 让A缓存，不请求数据
 next(); // 跳转到A页面
}

dans le composant B. Tous les codes du composant B sont les suivants :

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </p>
</template>

<script>
export default {
 name: &#39;list&#39;,
 data () {
 return {
  msg: &#39;Welcome to B Page&#39;
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = true; // 让A缓存，不请求数据
 next(); // 跳转到A页面
 }
};
</script>

Définissez beforeRouteLeave dans le composant C :

beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = false; // 让A不缓存，重新请求数据
 console.log(to)
 next(); // 跳转到A页面
}

Tout le code du composant c est le suivant :

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </p>
</template>

<script>
export default {
 name: &#39;list&#39;,
 data () {
 return {
  msg: &#39;Welcome to B Page&#39;
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = false; // 让A不缓存，重新请求数据
 console.log(to)
 next(); // 跳转到A页面
 }
};
</script>

Tout le code du composant a est comme suit :

<template>
 <p class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/b">跳转到b页面</router-link>
 <router-link to="/c">跳转到c页面</router-link>
 </p>
</template>

<script>
export default {
 name: &#39;helloworld&#39;,
 data () {
 return {
  msg: &#39;Welcome to A Page&#39;
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  &#39;aa&#39;: 1
  };
  Promise.all([this.$store.dispatch(&#39;testUrl&#39;, obj)]).then((res) => {});
 }
 },
 beforeRouteEnter(to, from, next) {
 next(vm => {
  /*
  如果 to.meta.savedPosition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据
  如果to.meta.keepAlive === false, 那么说明是需要请求的;
  此时需要刷新数据，获取新的列表内容。
  否则的话 什么都不做，直接使用 keep-alive中的缓存
  */
  if (to.meta.savedPosition === undefined) {
  vm.ajaxRequest();
  }
  if (!to.meta.keepAlive) {
  vm.ajaxRequest();
  }
 })
 }
};
</script>

Remarque Le composant b ne demande pas à nouveau de données au composant a (y compris en cliquant sur le lien et le bouton Précédent du navigateur), et le composant c demande des données au composant a (y compris en cliquant sur le lien et le bouton Précédent du navigateur).

Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Utiliser Koa pour créer des projets via Node.js

Existe-t-il une meilleure solution que l'implémentation asynchrone à l'aide de JavaScript ?

À propos de l'utilisation des composants de haut niveau Vue

Introduction détaillée à la liaison de données Vue

À propos de l'exemple de code de répertoire du chapitre sur la génération de sites Web

Comment utiliser l'arborescence dans le framework Bootstrap pour charger dynamiquement des données

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!