vue项目keep-alive 点击tab标签(tagsView)缓存页面,点击左侧菜单清除单个缓存

546 阅读1分钟

1、需求

vue项目中通过keep-alive做的缓存页面,正常情况下是,关闭tab页面,在重新打开就会重新加载;现在产品提了一个需求是:不需要关闭tab页面,而是点击左侧菜单的时候,tab页面重新加载

2、效果

在这里插入图片描述

3、解决办法

一、目前大多开源的vue+ElementUI开源的后台管理项目大多都是基于vue-element-admin而来的(如若依)

二、在src/layout/components/AppMain.vue页面如下设置

在这里插入图片描述

三、在点击左侧菜单上加一个事件(清除点击页面的缓存)

在src/layout/components/Sidebar/SidebarItem.vue页面如下设置 open事件写在el-menu-item标签上@click="open(item)" delCachedView方法在store下的tagsView.js文件中有(也可以直接用commit) 在这里插入图片描述

4、相关文章

基于ElementUi&Antd再次封装基础组件文档