keep alive实现前进更新后退销毁想要实现前进更新后退销毁，核心在操作keep-alive的include。
具体做法就是当进入新页面时将页面name保存，再次进入就将它之后的name删除。
具体实现思路：正常情况下页面是线性前进的：
a->b->c->d
include数组数据[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中添加nameimport 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实现前进更新后退销毁的详细内容。