Detailed explanation of vue3 cache page keep-alive and unified routing processing

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
	<!-- vue2.x configuration -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
  <!-- Vue3.0 configuration Component is fixed writing -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

path: '/',
name: 'Home',
component: Home,
meta:{
  keepAlive: true
}

...
Data that needs to be partially refreshed: <input type="text" v-model="newStr" />
...
data() {
  return {
    newStr: "2",
  };
},
mounted() {
  console.log("mounted method executed");
  this.newStr = "3";
},
activated() {
  console.log("The actived method was executed...");
  this.newStr = "4";
}

  // Use the guard in the component to do something with the page leaving event // to is the route to be redirected, from is the route of the previous page beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true;
    // The route continues to jump next();
  }

<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive>
</router-view>

export default {
    name:'testKA', // keep-alive include attribute matches component name
    data() {return {}},
    activated() {
        // The life cycle of the keepalive cached page will be performed every time it is entered},
}

<!-- Comma separated string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- Regular expression (using `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (using `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

state: {
  keepAlives:[]
},
mutations:
  SET_KEEP_ALIVE(state,params) {
    state.keepAlives = params
  }
},
getters:{
  keepAlive:function(state){
    return state.keepAlives
  }
}

<template>
  <div id="nav">
    <router-link to="/bbb">BBB</router-link> |
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive :include="keepAlive">
      <component :is="Component"/>
    </keep-alive>
  </router-view>
</template>
<script>
  export default{
    computed:{
      keepAlive(){
        return this.$store.getters.keepAlive
      }
    }
  }
</script>

// Use the guard in the component to do something with the page leaving event // to is the route to be redirected, from is the route of the previous page beforeRouteEnter(to, from, next) {
  next(vm=>{
    if(from.path == "/bbb"){
      vm.$store.commit("SET_KEEP_ALIVE",["Home"])
    }
  });
},
beforeRouteLeave(to, from, next) {
  if (to.path == "/about") {
    console.log("You will be redirected to the /about page...")
  } else {
    console.log("You will be redirected to a non-/about page...")
    this.$store.commit("SET_KEEP_ALIVE",[])
  }
  // The route continues to jump next();
}