更新せずにキープアライブ ページを返すことを使用して、Vue の単一ページの問題を解決する

以下に、Vue の単一ページで更新されずにキープアライブ ページが返される問題を解決する記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。

Vue を使用して単一ページのプロジェクトを開発しているときに、非常に不快な問題に遭遇しました。リスト ページ上のデータをクリックして詳細ページに入り、リターン キーを押してリスト ページに戻ると、ページが更新されます。ユーザー エクスペリエンスは非常に悪いです。 ！ ！関連する問題を確認し、7c9485ff8c3cba5ae9343ed63c2dc3f7 を使用してこの問題を解決しました。以下は私の経験です。

7c9485ff8c3cba5ae9343ed63c2dc3f7 は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持して、DOM の繰り返しレンダリングを防ぐことができます。

まず、App.vue ページに次のコードがあります。これがページがレンダリングされる場所であることは誰もが知っています

<router-view></router-view>

このコードを次のように変更します:

<keep-alive> 
<router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

このコードが何を行うかがわかります。論理的判断: ルートのメタ属性の keepAlive 属性値が true の場合、ページの状態は保存されます。それ以外の場合は、状態は保存されません。

次に、ルートの keepAlive 属性値を設定します。たとえば、ホームページ (リスト ページ) のルートに対して keepAlive 属性を true に設定します。

{ 
name: 'index', 
path: '/index', 
title: '主页', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主页', 
keepAlive: true 
} 
}

これを設定すると、ホームページのステータスが保存され、リターンキーがホームページに戻ったときにページはリクエストデータを更新しません。

しかし、問題があります！ ！ ！ホーム ページから任意のページにジャンプしてからホーム ページに戻っても、ページは更新されません。これは私が望んでいることではありません。詳細ページから一覧ページに戻るときにページを更新しないだけで済みます。それ以外の場合は更新する必要があるため、カスタマイズする必要があります。一般的な考え方は、ホームページから他のページにジャンプするときにホームページの keepAlive 値を false に設定し、詳細ページからホームページに戻るときにホームページの keepAlive 値を true に設定することです。コードは次のとおりです。

ホームページから他のページにジャンプする場合 ホームページのkeepAlive値をfalseに設定します

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值，false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

詳細ページからホームページに戻る場合、ホームページのkeepAlive値をtrueに設定します(ジャンプするかどうかは判断が必要です)ホームページに戻りました)

rreee

以上、皆様のお役に立てれば幸いです。

関連記事:

JSでEL式を使ってコンテキストパラメータの値を取得する方法

JSで左のリストを右のリストに移動する機能を実現する

でのEL式の使用jsと空でない判定メソッド

以上が更新せずにキープアライブ ページを返すことを使用して、Vue の単一ページの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。