vue2でキープアライブを使用する方法-jsチュートリアル-php.cn

今回は、vue2でkeep-aliveを使用する方法と、vue2でkeep-aliveを使用する際の注意事項を紹介します。以下は実際的なケースです。

keep-alive は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持して、DOM の繰り返しレンダリングを防ぐことができます。 vue-router と組み合わせると、ビューのコンテンツ全体をキャッシュできます。

基本的な使い方

は以下の通りです:

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

ログイン後にコピー

一般に、初めて一覧ページに入ったときにデータをリクエストする必要がありますが、一覧ページから詳細ページに入るときに、詳細ページはキャッシュせずにデータをリクエストしてから戻る必要があります。一覧ページへ

2 つの状況があります: 1. ブラウザの「戻る」ボタンを直接クリックします。

2. ナビゲーションバーの /list リンクをクリックして戻ります。

したがって、最初のケースでは、戻るボタンを直接使用してリストページ (/list) に戻るとき、データをリクエストする必要はありません。

2 番目のケースでは、リンクを通じてリストページに戻るデータをリクエストする必要があります。

ここには 3 つの状況があります: 1. デフォルトでは、リストページに入るにはデータのリクエストが必要です。

2. 詳細ページに入ったら、ブラウザのデフォルトの戻るボタンを使用して戻ります。これには、ajax リクエストは必要ありません。

3. 詳細ページに入り、リンクをクリックしてリストページに戻った後、ajax リクエストを送信する必要もあります。

構成は次のとおりです:

エントリーファイル

app.vue の構成は次のとおりです:

<!-- 缓存所有的页面 -->
<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. ルーターにメタ

属性

を設定し、キャッシュを使用する必要があることを示す場合は keepAlive: true を設定し、キャッシュが必要ないことを示す場合は false を設定します。そしてスクロール動作を追加しますscrollBehavior router/index.js の構成は以下の通りです:

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. list.vue コードは次のとおりです:

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

ログイン後にコピー

4.detail.vue コードは次のとおりです:

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

ログイン後にコピー

2: router.meta 拡張子を使用します現在 3 ページがあり、要件は次のとおりであると仮定します。

1. デフォルトでページ A があり、ページ A を受信するにはリクエストが必要です。

2. ページ B はページ A にジャンプします。ページ A を再度リクエストする必要はありません。

3. ページ C はページ A にジャンプします。ページ A を再度リクエストする必要があります。

その方法は次のとおりです:

ルート A にメタ属性を設定します:

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

ログイン後にコピー

したがって、router/index の下のすべてのコードは次のようになります:

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

ログイン後にコピー

Vue.use(ルーター);

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;

ログイン後にコピー

BコンポーネントにbeforeRouteLeave

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

ログイン後にコピー

を設定しますコンポーネント B のすべてのコードは次のとおりです:

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

ログイン後にコピー

C コンポーネントで beforeRouteLeave を設定します:

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

ログイン後にコピー

c コンポーネントのすべてのコードは次のとおりです:

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

ログイン後にコピー

a コンポーネント内のすべてのコードは次のとおりです:

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

ログイン後にコピー

コンポーネント b はコンポーネント a (リンクやブラウザの戻るボタンのクリックを含む) からのデータを再リクエストせず、コンポーネント c はコンポーネント a からのデータ (リンクやブラウザの戻るボタンのクリックを含む) をリクエストすることに注意してください

これで習得できたと思います。この記事の事例を読んでください。方法については、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨書籍:

nodejs が gulp パッケージ化機能を実装する方法

webpack を使用して複数ページのアプリケーションを構築する手順の分析

以上がvue2でキープアライブを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。