순방향 업데이트 및 역방향 소멸을 구현하려면 핵심은 Keep-Alive의 포함을 작동하는 것입니다.
구체적인 방법은 새 페이지에 진입할 때 페이지 이름을 저장하고, 다시 진입할 때 그 뒤의 이름을 삭제하는 것입니다.
일반적인 상황에서는 페이지가 선형적으로 진행됩니다.
A->B->C->D
배열 데이터 [A,B,C,D]를 포함합니다
다시 C를 입력하면 D가 C로 돌아간 것으로 간주됩니다
include 배열 데이터 [A, B, C]
D 페이지가 파괴되어 후방 파괴가 이루어집니다
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
import store from "../store" router.beforeEach((to, from,next) => { // 页面name要和route 的name一样 store.commit("keep/add", to.name) next() })
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!