vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

<テンプレート>
	<div id="nav">
	    <router-link to="/">ホーム</router-link> |
	    <router-link to="/about">について</router-link>
  	</div>
	<!-- vue2.x の設定 -->
   <キープアライブ>
    <router-view v-if="$route.meta.keepAlive" />
  </キープアライブ>
  <ルータービュー v-if="!$route.meta.keepAlive"/>
</テンプレート>

<テンプレート>
	<div id="nav">
	    <router-link to="/">ホーム</router-link> |
	    <router-link to="/about">について</router-link>
  	</div>
  <!-- Vue3.0 構成コンポーネントの書き込みが修正されました -->
  <router-view v-slot="{ コンポーネント }">
    <キープアライブ>
      <component :is="コンポーネント" v-if="$route.meta.keepAlive"/>
    </キープアライブ>
    <component :is="コンポーネント" v-if="!$route.meta.keepAlive"/>
  </ルータービュー> 
</テンプレート>

パス： '/'、
名前: 'ホーム'、
コンポーネント: ホーム、
メタ:{
  キープアライブ: 真
}

...
部分的に更新する必要があるデータ: <input type="text" v-model="newStr" />
...
データ（） {
  戻る {
    新しい文字列: "2",
  };
},
マウント() {
  console.log("マウントされたメソッドが実行されました");
  this.newStr = "3";
},
アクティブ化() {
  console.log("actived メソッドが実行されました...");
  this.newStr = "4";
}

  // コンポーネントのガードを使用して、ページを離れるイベントで何かを実行します // to はリダイレクトされるルート、from は前のページのルートです beforeRouteEnter(to, from, next) {
    to.meta.keepAlive を true に設定します。
    //ルートは next() にジャンプし続けます。
  }

<router-view v-slot="{ コンポーネント }">
  <キープアライブを含める="testKA">
    <コンポーネント:is="コンポーネント"/>
  </キープアライブ>
</ルータービュー>

エクスポートデフォルト{
    name:'testKA', // キープアライブインクルード属性はコンポーネント名と一致する
    データ() {戻り値 {}},
    アクティブ化() {
        // キープアライブキャッシュページのライフサイクルは、入力されるたびに実行されます},
}

<!-- カンマ区切りの文字列 -->
<キープアライブを含める="a,b">
  <コンポーネント:is="view"></コンポーネント>
</キープアライブ>

<!-- 正規表現 (`v-bind` を使用) -->
<キープアライブ:include="/a|b/">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

<!-- 配列 (`v-bind` を使用) -->
<キープアライブ:include="['a', 'b']">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

州： {
  キープアライブ:[]
},
突然変異:
  SET_KEEP_ALIVE(状態、パラメータ) {
    state.keepAlives = パラメータ
  }
},
ゲッター:{
  キープアライブ:関数(状態){
    state.keepAlivesを返す
  }
}

<テンプレート>
  <div id="nav">
    <router-link to="/bbb">BBB</router-link> |
    <router-link to="/home">ホーム</router-link> |
    <router-link to="/about">について</router-link>
  </div>
  <router-view v-slot="{ コンポーネント }">
    <キープアライブ:include="keepAlive">
      <コンポーネント:is="コンポーネント"/>
    </キープアライブ>
  </ルータービュー>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    計算:{
      キープアライブ(){
        これを返します。$store.getters.keepAlive
      }
    }
  }
</スクリプト>

// コンポーネント内のガードを使用して、ページを離れるイベントで何かを実行します // to はリダイレクトされるルート、from は前のページのルートです beforeRouteEnter(to, from, next) {
  次へ(vm=>{
    if(from.path == "/bbb"){
      vm.$store.commit("SET_KEEP_ALIVE",["ホーム"])
    }
  });
},
beforeRouteLeave(to, from, next) {
  to.path == "/about"の場合{
    console.log("/about ページにリダイレクトされます...")
  } それ以外 {
    console.log("/about 以外のページにリダイレクトされます...")
    this.$store.commit("SET_KEEP_ALIVE",[])
  }
  // ルートは next() にジャンプし続けます。
}