找到/layout/sidebar/SidebarItem.vue目录下,对el-menu-item增加一个点击事件
事件写法如下:
open(item){
//比较确定是否为当前页面
if(this.$route.name == item.name){
//如果是当前页面刷新页面
this.$store.dispatch('tagsView/delCachedView',this.$route).then(() => {
const {fullPath} = this.$route;
this.$route.replace({
path:'/redirect' + fullPath
})
})
}else{
//如果不是当前页面,清楚keepalive缓存
this.$store.dispatch("tagsView/delCacheView",item);
}
}
介绍一下代码思路,其实就是对导航菜单增加一个事件,这个事件根据不同的需求,触发对应tagsView的刷新页面机制和清除vue本身的keepalive缓存机制中的缓存。
在代码中注意到,keepalive的缓存是路由的name字段,所以大家在页面中要避免name字段重复。