Maison >interface Web >Voir.js >Comment vue3 utilise Keep Alive pour réaliser une mise à jour avancée et une destruction vers l'arrière
Si vous souhaitez réaliser une mise à jour avancée et une destruction vers l'arrière, l'essentiel est d'exploiter l'inclusion de keep-alive.
La méthode spécifique consiste à enregistrer le nom de la page lors de la saisie d'une nouvelle page et à supprimer le nom après celui-ci lors de la nouvelle saisie.
Dans des circonstances normales, la page avance de manière linéaire :
A->B->C->D
inclure les données du tableau [A,B,C,D]
Quand encore En entrant C, on considère que D revient à C
inclure les données du tableau [A, B, C]
La page D est détruite, réalisant ainsi une destruction en arrière
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>
Bien sûr, il existe également des sauts de boucle de page, généralement la page de détails
A->A->A->A ou A->B->C-> A->B->C
Dans ce cas, si vous n'avez pas besoin de sauvegarder la page, utilisez wacth pour surveiller les modifications de $route et redemandez l'interface
Si vous devez sauvegarder la page, utilisez routage dynamique addRoute pour ajouter un nouvel itinéraire
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 est très simple à utiliser avec vue-navigation
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!