Vue はキープアライブ キャッシュを使用し、キャッシュ状態を破棄します

Vue はキープアライブ キャッシュを使用し、キャッシュ状態を破棄します

必要

ページは操作状態を保存し、タブが閉じられたときにキャッシュ状態を破棄する必要があります。

達成

• 状態を保存する必要があるページに対応するルーティング属性 keepAlive を true に設定します。
• keep-alive で include または exclude 属性を使用します
  keepAlive 属性を追加します
  使用する動的ルーティングおよび静的ルーティング方法に応じて自分で追加し、場所を追加します

{
     name:'a'
     path:'/A',
     component:()=>import('@/pages/A'),
     meta:{
         title:'A页面'
     }
 },

追加が完了したら、ページのhtmlにinclude属性を追加します。includeは選択的にキャッシュされます。無い場合はキャッシュされません。excludeはその逆になります。include属性の値を追加、削除することで
、
ラベルコンポーネントと組み合わせてどのページが保存および破棄されるか. vuex で tagNames 値を設定して、グローバル共有変数になります.
vuex で tagNames を設定します, ここではタグによって表示される配列履歴を使用して取得します

state: {
	historys: [],
},
 mutations: {
	SETHISTORYS(state, historys) {
		state.historys = historys
	}
},
 actions: {
	setHistorys({ commit },historys) {
		commit("SETHISTORYS", historys)
	},
 },
 getters:{
	historys(state){
		return state.historys
	},
	/** 标签名称列表 */
	tagNames(state){
		return state.historys.map(function(tag){return tag.name})
	}
 }

<template>
  <div>
    <keep-alive :include="tagNames">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "superAdmin",
  computed: {
    ...mapGetters("history", ["tagNames"]),
  },
};
</script>
<style lang="scss"></style>

ここで注意する必要があるのは、 include と exclude により、このタグの name 属性値がこのタグの include または exclude の属性値と一致するすべての vue ページで動作するためです (名前に値を割り当てるわけではないことに注意してください)ルート）