検索
ホームページウェブフロントエンドjsチュートリアルvue2でキープアライブを使用する方法

今回は、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 リクエストを送信する必要もあります。

構成は次のとおりです:

1.

エントリーファイル

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

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view></router-view>
</keep-alive>
<router-view></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>
 </p>
<h1 id="vue">vue</h1>
 <h2 id="msg">{{msg}}</h2>
 <router-link>跳转到detail页</router-link>
 
</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.detail.vue コードは次のとおりです:

<template>
 <p>
 </p>
<h1 id="msg">{{msg}}</h1>
 <router-link>返回列表页</router-link>
 
</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: 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>
 </p>
<h1 id="msg">{{msg}}</h1>
 <router-link>返回a页面</router-link>
 
</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>

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

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

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

<template>
 <p>
 </p>
<h1 id="msg">{{msg}}</h1>
 <router-link>返回a页面</router-link>
 
</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>

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

<template>
 <p>
 </p>
<h1 id="vue">vue</h1>
 <h2 id="msg">{{msg}}</h2>
 <router-link>跳转到b页面</router-link>
 <router-link>跳转到c页面</router-link>
 
</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>

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

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

推奨書籍:

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


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


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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
使用vue的keep-alive组件实现页面缓存更新策略使用vue的keep-alive组件实现页面缓存更新策略Jul 21, 2023 pm 05:58 PM

使用Vue的keep-alive组件实现页面缓存更新策略引言:在开发Web应用程序时,经常需要处理页面缓存和更新的策略。基于Vue的SPA(Single-PageApplication)应用程序,我们可以使用Vue的keep-alive组件来进行页面缓存和更新的控制。本文将介绍如何使用Vue的keep-alive组件实现页面缓存更新策略,并提供相应的代码示

vue中keep-alive的工作原理及使用方法详解vue中keep-alive的工作原理及使用方法详解Jul 21, 2023 am 11:58 AM

Vue.js是一个流行的前端框架,提供了一些方便的功能来优化性能和提升开发效率。其中一个功能是keep-alive,它可以帮助我们在组件之间保留状态,从而减少不必要的渲染和请求。本文将详细介绍keep-alive的工作原理以及使用方法,并提供一些代码示例。一、keep-alive的工作原理在Vue.js中,每当我们切换组件时,组件都会被重新创建

如何使用vue的keep-alive优化单页应用的性能如何使用vue的keep-alive优化单页应用的性能Jul 21, 2023 am 09:25 AM

如何使用Vue的keep-alive优化单页应用的性能在开发现代Web应用时,性能一直是一个重要的关注点。随着前端框架的发展,Vue作为一款流行的JavaScript框架,为我们提供了许多工具和技术来优化应用的性能。其中之一就是Vue的keep-alive组件。Vue的keep-alive是一个抽象组件,可以将动态组件缓存起来,以避免重复渲染和销毁。使用ke

如何在vue中利用keep-alive提升前端开发效率如何在vue中利用keep-alive提升前端开发效率Jul 21, 2023 am 09:01 AM

如何在Vue中利用keep-alive提升前端开发效率前端开发的性能一直是开发人员关注的重点之一。为了提升用户体验和页面加载速度,我们经常要考虑如何优化前端渲染。Vue作为一款流行的前端框架,提供了keep-alive组件来解决非活动组件的性能问题。本文将介绍keep-alive的使用方法,并通过代码示例展示其在Vue中如何提升前端开发效率。keep-ali

Vue3中的keep-alive函数详解:优化应用性能的应用Vue3中的keep-alive函数详解:优化应用性能的应用Jun 18, 2023 pm 11:21 PM

Vue3中的keep-alive函数详解:优化应用性能的应用在Vue3中,keep-alive函数变得更加功能强大,可以实现更多的优化功能。通过keep-alive函数,可以将组件状态保留到内存中,避免组件的重复渲染,提升应用的性能和用户体验。本文将详细介绍Vue3中keep-alive函数的使用方法和优化策略。一、keep-alive函数介绍在Vue3中,

Go语言中http.Transport的Keep-Alive配置与性能优化方法Go语言中http.Transport的Keep-Alive配置与性能优化方法Jul 22, 2023 am 09:13 AM

Go语言中http.Transport的Keep-Alive配置与性能优化方法在使用Go语言进行网络编程时,我们经常会使用到http.Transport来发送HTTP请求。其中,http.Transport提供了Keep-Alive的功能,可以在多个请求之间复用TCP连接,从而提高性能。本文将介绍如何在Go语言中配置http.Transport的Keep-A

Vue3中的keep-alive函数:提升应用性能Vue3中的keep-alive函数:提升应用性能Jun 18, 2023 pm 02:56 PM

在Vue3中,为了优化应用性能,新增了一个名为keep-alive的函数。这个函数可以将组件缓存起来,避免在切换时重新渲染,从而提高应用的整体性能。一、keep-alive函数的作用在Vue3中,keep-alive函数可以用来缓存组件,等待再次使用。在渲染过程中,如果一个组件不被销毁,也就不需要重新初始化状态,以及重新计算计算属性等。这个函数接收一个

Vue 中如何使用 keep-alive 优化性能?Vue 中如何使用 keep-alive 优化性能?Jun 11, 2023 pm 01:04 PM

在开发Web应用程序时,我们都很关注应用程序的性能。其中一个常见的场景是点开一个页面,然后返回上一页,这个过程中,页面需要重新加载一遍。这对于用户体验来说是很不友好的,而且还会浪费服务器资源和用户的流量。为了避免这种情况,我们可以使用Vue中提供的keep-alive来进行缓存,从而提高应用程序的性能。什么是keep-alive?keep-al

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境