因为写了自制tab页面,需要实现关闭tab页面时清除缓存,切换tab页面时不清除缓存,新增和编辑复用了同一个页面
<router-view v-slot="{ Component }">
<div class="app_container">
<transition name="fade-transform" mode="out-in">
<keep-alive :exclude="tagList().excludeList"> //tagList().excludeList是仓库全局数据,当删除页面标签时加上,有tab页面时去掉
<component
ref="myComponent"
:is="wrap($route.name, Component)"
:key="$route.name"
/>
</keep-alive>
</transition>
</div>
</router-view>
因为同一个页面的name是相同的
defineOptions({
name: “edit”,
});
我们需要用路由名称来定义组件名称
const wrapperMap = new Map();
const wrap = (name, component) => {
let wrapper;
const wrapperName = name;
if (wrapperMap.has(wrapperName)) {
wrapper = wrapperMap.get(wrapperName);
} else {
wrapper = {
name: wrapperName,
render() {
return h("div", {}, component);
},
};
wrapperMap.set(wrapperName, wrapper);
}
return h(wrapper);
};
cankao
参考:http://www.cppcns.com/wangluo/javascript/512982.html