ホームページ > 記事 > ウェブフロントエンド > vue2でキープアライブを使用する方法
vue2でキープアライブを使用する方法
- 亚连オリジナル
- 2018-06-19 14:47:562420ブラウズ
vue2.0 は、コンポーネントをキャッシュするキープアライブ コンポーネントを提供し、対応するコンポーネントを複数回ロードすることを回避し、パフォーマンスの消費を削減します。この記事では、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 v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keep_alive"></router-view>
2. ルーターにメタ属性を設定し、キャッシュを使用する必要があることを示す keepAlive: true を設定します。 、および false は、キャッシュが必要ないことを示します。そして、スクロール動作を追加します。 router.meta 拡張子を使用します
現在 3 つのページがあるとします。要件は次のとおりです:
1. デフォルトでページ A があり、ページ A を受信するにはリクエストが必要です。
2. ページ B からページ A にジャンプします。ページ A を再度リクエストする必要はありません。
3. ページ C からページ A にジャンプし、ページ A を再度リクエストする必要があります。 実装は次のとおりです: Aルートにメタ属性を設定します:
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;したがって、router/indexの下のすべてのコードは次のようになります:
<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>Vue.use(Router);
<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>Set beforeRouteLeave in B コンポーネント
{
path: '/a',
name: 'A',
component: resolve => require(['@/views/a'], resolve),
meta: {
keepAlive: true // true 表示需要使用缓存
}
}B コンポーネントのすべてのコードは次のとおりです:
import Vue from 'vue'; import Router from 'vue-router'; // import HelloWorld from '@/views/HelloWorld';
C コンポーネントの RouteLeave の前に設定します:
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;c コンポーネントのすべてのコードは次のとおりです:
beforeRouteLeave(to, from, next) {
// 设置下一个路由meta
to.meta.keepAlive = true; // 让A缓存，不请求数据
next(); // 跳转到A页面
}a のすべてのコード
<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>b コンポーネントは a コンポーネントに接続されていないことに注意してください。データを再リクエスト (リンクやブラウザの戻るボタンをクリックすることを含む) し、c コンポーネントから a コンポーネントにデータをリクエストします (リンクやブラウザの戻るボタンをクリックすることも含みます)
上記はすべての人のためにまとめたものです。将来、すべての人に役立つことを願っています。
関連記事:
Koa を使用して Node.js を通じてプロジェクトを構築する JavaScript を使用した非同期実装よりも優れたソリューションはありますか? Vue の高レベルコンポーネントの使用についてBootstrap フレームワークでツリービューを使用してデータを動的にロードする方法
以上がvue2でキープアライブを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。