vueコンポーネントをkeep-aliveにキャッシュしない方法

開発ニーズ

動的展示システムトップページのすべての構造

日付照会対応するデータをクリックして対応するページをクリックして前のページに戻ると「ジャンプ前の日付データ状態の保持を要求する」

.

システムトップページのみに対してデータキャッシュ

を行う.
vue内蔵コンポーネントkeep-aliveを使用してキャッシュし、所望の機能を実現
発生した問題

keep-aliveパッケージを使用するルーティングは、すべてのページをキャッシュし、前回のデータが開発要件と一致しない

を任意に保持する.

キャッシュのせいでページ破棄のフック関数「deactivated」

に行かなかった
公式サイトの解析
「keep-alive」がダイナミックコンポーネントを包むと、アクティブでないコンポーネントインスタンスがキャッシュされ、破棄されるわけではありません.keep-aliveは抽象的なコンポーネントです.DOM要素はレンダリングされず、コンポーネントの親コンポーネントチェーンにも表示されません.コンポーネントがkeep-alive内で切り替わると、activatedとdeactivatedの2つのライフサイクルフック関数が対応して実行されます.
コンポーネントをincludeおよびexclude propにより条件付きでキャッシュできます.文字列、正規表現、または配列をカンマで区切ることができます.
include-文字列または正規表現.一致するコンポーネントのみがキャッシュされます.
exclude-文字列または正規表現.一致するコンポーネントはキャッシュされません.
実際の開発ソリューション
第1種
キャッシュしたくないコンポーネントに、keep-aliveによってコンポーネントがキャッシュされないように設定する方法を追加できます.ルーティングジャンプ前にページを破棄してキャッシュを消去し、次回のアクセス時にページデータを新しいロードすることが原理です.

<template>
    <div>
                   
    </div>
</template>
<script>
export default {
    data() {
		return {
		
		}
    },
    methods:{
       
    },
    //               keep-alive    
    deactivated() {
        this.$destroy();
    }
}
</script>
<style  scoped>

</style>

第2種
公式サイトで与えられた方法でinclude設定コンポーネントで条件付きキャッシュ(選択可能なキャッシュ)

<keep-alive :include="routerName">
     <router-view />
</keep-alive>

data(){
  return {
  //          
    routerName: {
      'homePage' //     
    }
  }
}

キャッシュしたいコンポーネントで名前を定義します(必ず書きます)

<template>
    <div>
                 
    </div>
</template>
<script>
export default {
	// name      include                
    name:'homePage',
    data() {
        return {
			
        };
    },
    methods:{
       
    }
}
</script>
<style  scoped>

</style>