So verwenden Sie Keep-Alive in vue2

Dieses Mal zeige ich Ihnen, wie Sie Keep-Alive in Vue2 verwenden . . keep-alive ist eine integrierte Komponente von Vue, die den Zustand während des Komponentenwechsels im Speicher behalten kann, um ein wiederholtes Rendern des DOM zu verhindern. In Kombination mit Vue-Router kann der gesamte Inhalt einer Ansicht

zwischengespeichert werden.

Grundlegende Verwendung

ist wie folgt:

Im Allgemeinen besteht eine solche Anforderung, wenn wir die Listenseite zum ersten Mal aufrufen. Wenn ich die Detailseite von der Listenseite aus aufrufe, muss die Detailseite die Daten ohne Zwischenspeicherung anfordern und dann zurückkehren zur Listenseite

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

Es gibt zwei Situationen:

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

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

Wenn wir also im ersten Fall direkt über die Schaltfläche „Zurück“ zur Listenseite (/list) zurückkehren, müssen keine Daten angefordert werden.

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

Hier gibt es also drei Situationen:

1. Standardmäßig erfordert der Zugriff auf die Listenseite die Anforderung von Daten.

2. Nachdem Sie die Detailseite aufgerufen haben, kehren Sie mit der Standard-Zurück-Schaltfläche des Browsers zurück, für die keine Ajax-Anfrage erforderlich ist.

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

Eintragsdatei

app.vue lautet wie folgt:

2. Legen Sie das Meta-Attribut

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

im Router fest und legen Sie keepAlive: true fest, um anzugeben, dass der Cache verwendet werden muss, und false, um anzugeben, dass der Cache nicht erforderlich ist. Und fügen Sie das Scrollverhalten scrollBehavior

hinzu Die Konfiguration von router/index.js lautet wie folgt:

3. Der list.vue-Code lautet 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;

4. Der detail.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: 'helloworld',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('testUrl', 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>

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

Zweitens: Verwenden Sie die Erweiterung router.meta

Gehen Sie davon aus, dass es jetzt 3 Seiten gibt und die Anforderungen wie folgt sind:

1. Standardmäßig gibt es 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:

Legen Sie das Metaattribut in Route A fest:

Der gesamte Code unter router/index lautet also wie folgt:

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

Vue.use(Router);

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

VorRouteLeave

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;

in Komponente B festlegen Alle Codes für Komponente B lauten wie folgt:

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

VorRouteLeave in der C-Komponente festlegen:

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </p>
</template>
<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to B Page'
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = true; // 让A缓存，不请求数据
 next(); // 跳转到A页面
 }
};
</script>

Alle Codes für die C-Komponente lauten wie folgt:

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

Alle Codes innerhalb der a-Komponente lauten wie folgt:

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </p>
</template>
<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to B Page'
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = false; // 让A不缓存，重新请求数据
 console.log(to)
 next(); // 跳转到A页面
 }
};
</script>

Beachten Sie, dass Komponente b keine Daten von Komponente a erneut anfordert (einschließlich Klick-Links und Browser-Zurück-Schaltflächen) und Komponente c Daten von Komponente a anfordert (einschließlich Klick-Links und Browser-Zurück-Schaltflächen).

<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: 'helloworld',
 data () {
 return {
  msg: 'Welcome to A Page'
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('testUrl', 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>

Ich glaube, ich Ich habe den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie NodeJS die Gulp-Packaging-Funktion implementiert

Analyse der Schritte zum Erstellen mehrseitiger Anwendungen mit Webpack

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!