So implementieren Sie Routen-Caching über die Keep-Alive-Komponente von Vue

So implementieren Sie Routen-Caching über die Keep-Alive-Komponente von Vue

Bei der Verwendung von Vue für die Front-End-Entwicklung stoßen wir häufig auf die Notwendigkeit, den Status der vorherigen Route beim Routenwechsel beizubehalten, um eine bessere Benutzererfahrung zu erzielen . Vue bietet eine Komponente namens Keep-Alive, die uns dabei helfen kann, diese Anforderung zu erfüllen.

keep-alive ist eine in Vue integrierte abstrakte Komponente, die außerhalb der Komponente verpackt werden kann, die zwischengespeichert werden muss, um den Caching-Effekt der Komponente zu erzielen. Wenn Sie Keep-Alive beim Routing verwenden, können Sie es außerhalb der 975b587bf85a482ea10b0a28848e78a4-Komponente einschließen. Lassen Sie uns als Nächstes anhand eines praktischen Beispiels demonstrieren, wie Sie mithilfe von Keep-Alive das Routen-Caching implementieren.

Zuerst müssen wir ein Vue-Projekt erstellen und das Vue-Router-Plugin installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:

vue create router-cache-demo
cd router-cache-demo
npm install vue-router

Als nächstes erstellen wir eine Komponente namens Home, wie unten gezeigt:

<template>
  <div>
    <h1>Home</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Diese Komponente zeigt einen Zähler und eine Schaltfläche an. Wenn Sie auf die Schaltfläche klicken, wird der Wert des Zählers erhöht um 1.

Dann müssen wir in der Routing-Konfigurationsdatei die Home-Komponente einführen und den Routing-Pfad festlegen.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
];

const router = new VueRouter({
  routes
});

export default router;

In der App.vue-Datei packen wir die 975b587bf85a482ea10b0a28848e78a4-Komponente in die 7c9485ff8c3cba5ae9343ed63c2dc3f7-Komponente ein und legen das Include-Attribut fest, damit die Home-Komponente zwischengespeichert werden kann.

<template>
  <div id="app">
    <keep-alive :include="cachedComponents">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedComponents: ['Home']
    };
  }
};
</script>

Hier legen wir das CachedComponents-Array fest und fügen die Home-Komponente zum Array hinzu, um Vue anzuweisen, die Komponente beim Routenwechsel zwischenzuspeichern.

Abschließend führen wir die Routing-Konfigurationsdatei in die Datei main.js ein und verknüpfen sie mit der Vue-Instanz.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Jetzt können wir versuchen, Routen zu wechseln, und wir können feststellen, dass beim Wechsel zu anderen Routen und dann beim Zurückwechseln zur Home-Route der vorherige Zählerwert immer noch beibehalten wird.

Durch die oben genannten Schritte haben wir die Keep-Alive-Komponente von Vue erfolgreich eingesetzt, um den Routing-Caching-Effekt zu erzielen. Wir können die Routing-Komponenten, die zwischengespeichert werden müssen, entsprechend den tatsächlichen Anforderungen frei festlegen.

Zusammenfassung: Durch die Keep-Alive-Komponente von Vue können wir Routing-Komponenten zwischenspeichern, um die Benutzererfahrung zu verbessern. Bei Verwendung von Keep-Alive müssen wir die Routing-Komponente umschließen und das Include-Attribut in der App.vue-Datei festlegen, um Vue mitzuteilen, welche Komponenten zwischengespeichert werden sollen. Ich hoffe, dieser Artikel ist hilfreich für Sie!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Routen-Caching über die Keep-Alive-Komponente von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!