So verwenden Sie Vue Keep-Alive zum Anfordern von Daten

Dieses Mal zeige ich Ihnen, wie Sie Vue Keep-Alive zum Anfordern von Daten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue Keep-Alive zum Anfordern von Daten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Indexseite: Startseite Markeneingang

Listenseite: Produktlistenseite

Produktseite: Produktdetailseite

Bei Eingabe der Liste aus dem Index Seite Aktualisieren Sie die Seite, wenn Sie die Liste von der Produktseite zurückgeben. Daher wird für die Liste das Keep-Alive-Attribut verwendet. Während des Entwicklungsprozesses wurde jedoch ein Problem festgestellt Wenn Sie von der Produktseite zur Liste zurückkehren, ist die Markenliste nicht korrekt und nicht die Markenliste eines vorherigen Klicks. Da jeder auf unterschiedliche Probleme mit falschen Keep-Alive-Anfragedaten stößt, ist hier meine Lösung. Ich hoffe, das kann Ihnen eine Idee geben.

Lösung

Viele Leute werden Keep-Alive ändern, indem sie KeepAlive modifizieren. Nachdem ich es versucht habe, hat es immer noch nicht funktioniert, also habe ich habe meine Meinung geändert

Ausführungsreihenfolge der Hook-Funktionen

Keep-Alive nicht verwenden

beforeRouteEnter --> ;montiert --> zerstört

beforeRouteEnter -->

Lernen Sie zunächst die Lese- und Schreibfähigkeiten. Auf der Keep-Alive-Seite können Sie die Parameter von this.$route.params aktivieren.

Vermeiden Sie die Einstellung von keepAlive. Wenn das Produkt zurückkehrt, befinden sich die Daten in einem zwischengespeicherten Zustand. Anschließend wird beurteilt, ob die Funktion aktiviert ist, indem sie aus dem Index eingegeben wird .

list.vue

   beforeRouteEnter(to, from, next) {
   //判断从index页面进入，将list的isBack设置为true
   //这样就可以请求数据了
     if (from.name == 'index') {
      to.meta.isBack = true;
     }
     next();
   },
   activated: function () {
     if (this.$route.meta.isBack || this.isFirstEnter) {
      //清理已有商品列表的数据，重新请求数据，如果不清除的话就会有之前的商品缓存，延迟显示最新的商品
      this.proData = [];
      //请求数据
      this.fetchData();
     }
     //重新设置当前路由的isBack
     this.$route.meta.isBack = false;
     //重新设置是否第一次进入
     this.isFirstEnter = false;
   },
   mounted: function () {
    //如果是第一次进入，或者刷新操作的话，也请求数据
     this.isFirstEnter = true;
   },

router.js

const appRouter = {
 mode: "history",
 base: "/m/",
 routes: [
  {
   path: "",
   redirect: "/index"
  },
  {
   path: "/index",
   name: "index",
   component: Index,
   meta: {
    keepAlive: true
   }
  },
    {
   path: "/list",
   name: "list",
   component: List,
   meta: {
    keepAlive: true,
    isBack: false //isback是true的时候请求数据，或者第一次进入的时候请求数据
   }
  },
  {
   path: "/product/:id",
   name: "product",
   component: Product,
   meta: {
    keepAlive: false
   }
  }
  
 ]
};

Vue.use(Router);
export default new Router(appRouter);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So bedienen Sie die Vue-Eingabe, um eine Bestätigungskombination aus Buchstaben und Zahlen einzugeben und die Länge beträgt weniger als 30

So verwenden Sie Seajs. Schreiben Sie die Vereinbarung in require

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue Keep-Alive zum Anfordern von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!