vue3가 Keep Alive를 사용하여 순방향 업데이트 및 역방향 소멸을 달성하는 방법

keep Alive는 순방향 업데이트 및 역방향 소멸을 구현합니다

순방향 업데이트 및 역방향 소멸을 구현하려면 핵심은 Keep-Alive의 포함을 작동하는 것입니다.
구체적인 방법은 새 페이지에 진입할 때 페이지 이름을 저장하고, 다시 진입할 때 그 뒤의 이름을 삭제하는 것입니다.

구체적인 구현 아이디어:

일반적인 상황에서는 페이지가 선형적으로 진행됩니다.

A->B->C->D

배열 데이터 [A,B,C,D]를 포함합니다

다시 C를 입력하면 D가 C로 돌아간 것으로 간주됩니다

include 배열 데이터 [A, B, C]

D 페이지가 파괴되어 후방 파괴가 이루어집니다

vuex를 사용하여 include 배열을 저장하세요

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

beforeEach에 이름 추가

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

include는

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

를 사용합니다. 물론 페이지 루프 점프도 있습니다. 일반적으로 세부정보 페이지

A->A->A->A 또는 A->B->C-> A->B->C

이 경우 페이지를 저장할 필요가 없다면 wacth를 사용하여 $route 변경 사항을 모니터링하고 인터페이스를 다시 요청하세요

페이지를 저장해야 하는 경우 다음을 사용하세요. 새로운 경로를 추가하는 동적 라우팅 addRoute

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는 vue-navigation

과 함께 사용하기 매우 쉽습니다.

위 내용은 vue3가 Keep Alive를 사용하여 순방향 업데이트 및 역방향 소멸을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!