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