Cara vue3 menggunakan kekal hidup untuk mencapai kemas kini ke hadapan dan kemusnahan ke belakang

Keep alive melaksanakan kemas kini ke hadapan dan kemusnahan ke belakang

Jika anda ingin merealisasikan kemas kini ke hadapan dan kemusnahan ke belakang, terasnya adalah untuk mengendalikan termasuk keep-alive.
Kaedah khusus adalah untuk menyimpan nama halaman apabila memasuki halaman baharu, dan memadamkan nama selepasnya apabila memasuki semula.

Idea pelaksanaan khusus:

Dalam keadaan biasa, halaman maju secara linear:

A->B->C->D

sertakan data tatasusunan [A,B,C,D]

Apabila memasukkan C sekali lagi, adalah dianggap bahawa D kembali ke C

termasuk data tatasusunan [A,B,C]

Halaman D dimusnahkan, sekali gus mencapai kemusnahan mundur

Gunakan vuex untuk menyimpan tatasusunan sertakan

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

Tambah nama

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

masukkan dalam beforeEach dan gunakan

<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>

Sudah tentu, terdapat juga lompatan gelung halaman, biasanya halaman butiran

A->A->A->A atau A->B->C-> A- >B->C

Dalam kes ini, jika anda tidak perlu menyimpan halaman, gunakan wacth untuk memantau perubahan $route dan minta semula antara muka

Jika anda perlu menyimpan halaman, gunakan penghalaan dinamik addRoute untuk menambah yang baharu Penghalaan

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 menggunakan navigasi vue yang sangat mudah digunakan

Atas ialah kandungan terperinci Cara vue3 menggunakan kekal hidup untuk mencapai kemas kini ke hadapan dan kemusnahan ke belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!