Wie vue3 Keep Alive verwendet, um eine Vorwärtsaktualisierung und eine Rückwärtszerstörung zu erreichen

Keep Alive implementiert Vorwärtsaktualisierung und Rückwärtszerstörung

Wenn Sie Vorwärtsaktualisierung und Rückwärtszerstörung realisieren möchten, besteht der Kern darin, die Keep-Alive-Einbindung zu bedienen.
Die spezifische Methode besteht darin, den Seitennamen beim Aufrufen einer neuen Seite zu speichern und den Namen danach beim erneuten Aufrufen zu löschen.

Spezifische Implementierungsideen:

Unter normalen Umständen schreitet die Seite linear voran:

A->B->C->D

Array-Daten einschließen [A,B,C,D]

Wenn noch einmal Wenn Sie C eingeben, wird davon ausgegangen, dass D zu C zurückkehrt

Array-Daten [A, B, C] einschließen

D-Seite wird zerstört, wodurch eine Rückwärtszerstörung erreicht wird

Verwenden Sie vuex, um das Include-Array zu speichern

const keep = {
    namespaced: true,
    state: () => {
        return {
            include: [],
        }
    },
    getters: {
        include(state) {
            return state.include
        },
    },
    mutations: {
        add(state, name) {
            let b = false
            let i = 0
            for (; i < state.include.length; ++i) {
                let e = state.include[i]
                if (e == name) {
                    b = true
                    break
                }
            }
            if (!b) {
                state.include.push(name)
            } else {
                state.include.splice(i + 1)
            }
        }
    },
    actions: {
    }
}
export default keep

Fügen Sie den Namen in beforeEach hinzu

import store from "../store"
router.beforeEach((to, from,next) => {
// 页面name要和route 的name一样
  store.commit("keep/add", to.name)
  next()
})

include verwendet

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script>
export default {
  computed: {
    includeList() {
      return this.$store.getters["keep/include"].join(",");
    },
  },
};
</script>

Natürlich gibt es auch Seitenschleifensprünge, meist wird die Detailseite

A->A->A->A oder A->B->C-> A->B->C

Wenn Sie in diesem Fall die Seite nicht speichern müssen, verwenden Sie wacth, um $route-Änderungen zu überwachen und die Schnittstelle erneut anzufordern.

Wenn Sie die Seite speichern müssen, verwenden Sie dynamisches Routing addRoute zum Hinzufügen einer neuen Route

A1- >A2->A3->A4

import time from "../views/time"
function copyObj(obj) {
    if (typeof obj == "object") {
        if (Array.isArray(obj)) {
            let arr = [];
            for (let item of obj) {
                arr.push(Object.assign(copyObj(item)));
            }
            return arr;
        } else if (obj == null) {
            return null;
        } else {
            let obj1 = {};
            for (let index in obj) {
                obj1[index] = copyObj((obj[index]));
            }
            return obj1;
        }
    } else if (typeof obj == "function") {
        return Object.assign(obj);
    } else if (typeof obj == undefined) {
        return undefined;
    } else {
        return obj;
    }
}
window.pushTime = function () {
    let t = new Date().getTime();
    let path = `/time/${t}`;
    // 深复制component
    time = copyObj(time)
    // component name要和route 的name一样
    time.name = path
    this.$router.addRoute({
        path,
        name: path,
        component: time,
    });
    this.$router.push({
        path,
    });
}

vue2 ist mit Vue-Navigation sehr einfach zu verwenden

Das obige ist der detaillierte Inhalt vonWie vue3 Keep Alive verwendet, um eine Vorwärtsaktualisierung und eine Rückwärtszerstörung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!