Detaillierte Erläuterung der Keep-Alive- und Unified-Routing-Verarbeitung von Vue3-Cache-Seiten

<Vorlage>
	<div id="nav">
	    <router-link to="/">Zuhause</router-link> |
	    <router-link to="/about">Über</router-link>
  	</div>
	<!-- vue2.x-Konfiguration -->
   <am Leben erhalten>
    <router-view v-if="$route.meta.keepAlive" />
  </am Leben erhalten>
  <router-view v-if="!$route.meta.keepAlive"/>
</Vorlage>

<Vorlage>
	<div id="nav">
	    <router-link to="/">Zuhause</router-link> |
	    <router-link to="/about">Über</router-link>
  	</div>
  <!-- Vue3.0-Konfigurationskomponente hat feste Schreibweise -->
  <router-view v-slot="{ Komponente }">
    <am Leben erhalten>
      <component :is="Komponente" v-if="$route.meta.keepAlive"/>
    </am Leben erhalten>
    <component :is="Komponente" v-if="!$route.meta.keepAlive"/>
  </Router-Ansicht> 
</Vorlage>

Weg: '/',
Name: "Home",
Komponente: Home,
Meta:{
  keepAlive: wahr
}

...
Daten, die teilweise aktualisiert werden müssen: <input type="text" v-model="newStr" />
...
Daten() {
  zurückkehren {
    newStr: "2",
  };
},
montiert() {
  console.log("gemountete Methode ausgeführt");
  dies.newStr = "3";
},
aktiviert() {
  console.log("Die aktive Methode wurde ausgeführt...");
  dies.newStr = "4";
}

  // Benutze den Guard in der Komponente um etwas mit dem Seitenverlassensereignis zu tun // to ist die umzuleitende Route, from ist die Route der vorherigen Seite beforeRouteEnter(to, from, next) {
    zu.meta.keepAlive = wahr;
    // Die Route wird mit dem Sprung next() fortgesetzt;
  }

<router-view v-slot="{ Komponente }">
  <keep-alive include="testKA">
    <Komponente: ist = "Komponente"/>
  </am Leben erhalten>
</Router-Ansicht>

Standard exportieren {
    Name:'testKA', // Keep-Alive-Include-Attribut stimmt mit dem Komponentennamen überein
    Daten() {return {}},
    aktiviert() {
        // Der Lebenszyklus der zwischengespeicherten Keepalive-Seite wird bei jedem Aufruf ausgeführt},
}

<!-- Durch Komma getrennte Zeichenfolge -->
<keep-alive include="a,b">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

<!-- Regulärer Ausdruck (mit `v-bind`) -->
<keep-alive :include="/a|b/">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

<!-- Array (mit `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

Zustand: {
  keepAlives:[]
},
Mutationen:
  SET_KEEP_ALIVE(Zustand,Parameter) {
    state.keepAlives = Parameter
  }
},
Getter: {
  keepAlive:Funktion(Zustand){
    Status zurückgeben.keepAlives
  }
}

<Vorlage>
  <div id="nav">
    <router-link to="/bbb">BBB</router-link> |
    <router-link to="/home">Zuhause</router-link> |
    <router-link to="/about">Über</router-link>
  </div>
  <router-view v-slot="{ Komponente }">
    <am Leben halten :include="am Leben halten">
      <Komponente: ist = "Komponente"/>
    </am Leben erhalten>
  </Router-Ansicht>
</Vorlage>
<Skript>
  Standard exportieren{
    berechnet:{
      keepAlive(){
        gib dies zurück.$store.getters.keepAlive
      }
    }
  }
</Skript>

// Benutze den Guard in der Komponente um etwas mit dem Seitenverlassensereignis zu tun // to ist die umzuleitende Route, from ist die Route der vorherigen Seite beforeRouteEnter(to, from, next) {
  nächste(vm=>{
    wenn(von.Pfad == "/bbb"){
      vm.$store.commit("SET_KEEP_ALIVE",["Startseite"])
    }
  });
},
vorRouteAbfahren(nach, von, weiter) {
  wenn (zu.Pfad == "/about") {
    console.log("Sie werden zur /about-Seite weitergeleitet...")
  } anders {
    console.log("Sie werden auf eine Nicht-/Infoseite umgeleitet...")
    dies.$store.commit("SET_KEEP_ALIVE",[])
  }
  // Die Route wird mit dem Sprung next() fortgesetzt;
}