需求来源及描述
后台管理系统中，左侧为功能菜单栏，点击菜单列表，右侧显示该菜单的功能页面，本来是一个非常简单的后台管理系统布局，现在增加了tabs菜单按钮；
点击左侧菜单栏时，右侧页面头部header显示当前的页面标题，形成一个tabs列表，点击可切换页面内容和关闭tabs；
需求要求，点击左侧时，右侧显示页面内容，同时右侧header增加该页面的tabs，点击tabs可以切换页面，但页面内容不刷新，点击左侧菜单时，右侧内容刷新；
第一想到的时利用vue的功能组件,此时只能实现缓存，但是不能根据需求实现动态缓存。
<keep-alive>
<router-view/>
</keep-alive>
利用计算属性和vuex获取缓存列表
<!-- vuex -->
state: {
keepAliveList: '',//保存缓存的列表
},
mutations: {
setKeepAliveLists (state, arrListString) {
state.keepAliveList = arrListString;
},
}
<!-- 视图组件中 -->
computed: {
keepAliveList () { // 获取缓存的路由列表
return this.$store.state.keepAliveList;
}
}
生成缓存列表，列表的值为各组件中name的值集合拼接的字符串
this.$store.commit('setKeepAliveLists',routerComponentNameList.join())
点击左侧菜单栏时，更新缓存列表
<!-- 点击左侧菜单的事件函数 -->
handleSelect(name) {
if(this.routerNameMap.has(name)){//如果当前点击的路由已经在缓存列表中，则先清除缓存列表，再添加；
this.resetKeepAive(name,this.keepAliveList);//删除缓存路由
this.tabChangeRoute(name);//切换路由
} else {
this.routerNameMap.add(name)
this.tabChangeRoute(name);
}
},
// 更新要缓存的路由列表
resetKeepAive(name,cacheList) {
const conf = this.keepAliveList;
let arr = cacheList.split(',');
if (name && typeof name === 'string') {
let i = arr.indexOf(name);
if (i > -1) {
arr.splice(i, 1);
this.$store.commit('setKeepAliveLists',arr.join());
this.$nextTick(() => {//添加缓存路由
this.$store.commit('setKeepAliveLists',conf);
})
}
}
}
点击右侧tabs关闭标签删除缓存
removeTab (name) {
// 点击tab上的关闭按钮，清除当前路由的缓存
this.routerNameMap.delete(name);
this.resetKeepAive(name, this.keepAliveList);//删除缓存路由
}
下面为主要代码，监听当前路由是否被移除缓存，如果移除缓存则需要销毁该组件，否则内容中的缓存组件会越来越来，影响使用性能；
创建一个mixin.js文件，然后引入到需要被动态缓存的路由组件中即可；
// 路由缓存管理
export default {
computed: {
keepAliveConf(){
return this.$store.state.keepAliveList;
}
},
watch:{
keepAliveConf(e){
// 监听缓存列表的变化，如果缓存列表中没有当前的路由或组件则在缓存中销毁该实例
let name = this.$options.name;
if(!e.split(',').includes(name)) {
this.$destroy()
}
}
},
}
原文链接:https://segmentfault.com/a/1190000019788203?utm_source=tag-newest
