vueダイナミックコンポーネントをキャッシュした後、ページに切り替えるたびに再レンダリングできない問題の解決

1526 ワード

一、問題の説明vueのプロジェクトで、このような問題に遭遇しました.keep-aliveを使用してダイナミックコンポーネントをキャッシュすると、ページまたはコンポーネントに切り替えるたびにキャッシュされます.1ページに入った後、mountedを使用してデータ要求を行うと、キャッシュされます.次にページに入ると、データ要求を再開せず、キャッシュから直接データを読み出し、最新のデータを取得できず、ページを再レンダリングすることができます.これも私たちが望んでいるものではありません.
二、問題解決
このような問題に対して、私たちは2つの解決方法があります.
1.第1の方法keep-aliveには、activated()deactivated()の2つのライフサイクルフック関数があります.activated()を使用すると、コンポーネントがアクティブになったときに呼び出され、ページに入るたびに実行され、mountedの代わりにデータの要求が行われます.したがって、mountedactivatedに置き換えるだけで問題を解決することができる.
2.第2の方法keep-aliveに属性excludeを追加することができ、属性の値はnameであり、excludekeep-aliveによってキャッシュされたコンポーネントを取り消すことができるためである.コードの例は次のとおりです.
<keep-alive exclude="detail">
    <router-view/>
keep-alive>