So verwenden Sie Keep-Alive in vue2

vue2.0 bietet eine Keep-Alive-Komponente zum Zwischenspeichern von Komponenten, um das mehrfache Laden entsprechender Komponenten zu vermeiden und den Leistungsverbrauch zu reduzieren. Dieser Artikel stellt Ihnen eine Zusammenfassung und Vorsichtsmaßnahmen für die Verwendung von Keep-Alive in Vue2 vor. Freunde, die es benötigen, können darauf verweisen.

Keep-Alive ist eine integrierte Komponente von Vue, die den Status beibehalten kann im Speicher während des Komponentenwechsels verhindern. In Kombination mit Vue-Router kann der gesamte Inhalt einer Ansicht zwischengespeichert werden.

Die grundlegende Verwendung ist wie folgt:

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

Im Allgemeinen besteht eine solche Nachfrage, wenn wir die Listenseite zum ersten Mal aufrufen Von der Listenseite aus wird die Detailseite nicht zwischengespeichert. Sie müssen Daten anfordern und dann zur Listenseite zurückkehren.

Es gibt zwei Situationen:

1. Klicken Sie direkt auf die Zurück-Schaltfläche des Browsers.

2. Klicken Sie auf den Link /list in der Navigationsleiste, um zurückzukehren.

Im ersten Fall besteht keine Notwendigkeit, Daten anzufordern, wenn wir direkt über die Schaltfläche „Zurück“ zur Listenseite (/list) zurückkehren.

Im zweiten Fall müssen wir Daten anfordern, indem wir über den Link zur Listenseite zurückkehren.

Hier gibt es also drei Situationen:

1. Standardmäßig muss die Listenseite Daten anfordern.

2. Verwenden Sie nach dem Aufrufen der Detailseite die Standard-Zurück-Schaltfläche des Browsers, um zurückzukehren, was keine Ajax-Anfrage erfordert.

3. Nachdem Sie die Detailseite aufgerufen und durch Klicken auf den Link zur Listenseite zurückgekehrt sind, müssen Sie auch eine Ajax-Anfrage senden.

Die Konfiguration ist wie folgt:

1. Die Eintragsdatei app.vue ist wie folgt konfiguriert:

<!-- 缓存所有的页面 -->
<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 : true, um anzugeben, dass der Cache verwendet werden muss. Wenn false, bedeutet dies, dass kein Cache verwendet werden muss. Und scrollBehavior

router/index.js-Konfiguration ist wie folgt:

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. Der list.vue-Code lautet wie folgt:

<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 Der Code lautet wie folgt:

<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>

Zwei: Verwenden Sie die Erweiterung router.meta

Angenommen, es gibt jetzt 3 Seiten, die Anforderungen sind wie folgt:

1. Es gibt standardmäßig Seite A und es ist eine Anfrage erforderlich, damit Seite A angezeigt wird.

2. Seite B springt zu Seite A und Seite A muss nicht erneut angefordert werden.

3. Seite C springt zu Seite A und Seite A muss erneut angefordert werden.

Die Implementierung ist wie folgt:

Setzen Sie das Metaattribut in Route A:

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

So wird der gesamte Code unter Router/Index wie folgt:

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页面
}

In Komponente B lauten alle Codes wie folgt:

<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>

Set beforeRouteLeave in Komponente C:

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

c-Komponente lauten wie folgt:

<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>

Alle Codes in der a-Komponente lauten wie folgt:

<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>

Beachten Sie, dass die b-Komponente nicht re- Daten von der A-Komponente anfordern (einschließlich angeklickter Links und Browser-Zurück-Schaltflächen), die C-Komponente fordert Daten von der A-Komponente an (einschließlich angeklickter Links und Browser-Zurück-Schaltflächen).

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Mit Koa Projekte über Node.js erstellen

Gibt es eine bessere Lösung als die asynchrone Implementierung mit JavaScript?

Über die Verwendung von Vue-High-Level-Komponenten

Detaillierte Einführung in die Vue-Datenbindung

Über das Codebeispiel für ein Kapitelverzeichnis zur Website-Generierung

So verwenden Sie die Baumansicht im Bootstrap-Framework, um Daten dynamisch zu laden

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Keep-Alive in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!