背景:在使用若依框架时发现一个问题,左侧menu在切换时,右侧面板不刷新,mounted只进1次。
解决:查看代码,最终找到了SidebarItem.vue这个页面。
路径:src\layout\components\Sidebar\SidebarItem.vue
说明:在选择某一项item的时候,根据name判断,选中的item是不是当前路由,如果是,则刷新页面,不是则清除keepalive缓存当前的路由信息
代码如下:
在html中的el-menu-item标签上添加@click="open(onlyOneChild)"方法
html中:
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"
@click="open(onlyOneChild)"
>
<item
:icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
:title="onlyOneChild.meta.title"
/>
</el-menu-item>
open方法:
open(item) {
// 点击事件根据name判断,确定选中item是不是当前路由
if (this.$route.name == item.name) {
//如果是当前页面则刷新页面
// 在vuex中
this.$store
.dispatch("tagsView/delAllCachedViews", this.$route)
.then(() => {
const { PathAll } = this.$route;
// console.log(this.$route.path, "path");
// this.$route.path="/redirect" + fullPath
// 给路径重定向相当于刷新页面
this.$route.toString().replace({
path: "/redirect" + PathAll,
});
});
} else {
//如果不是当前页面,清除keepalive缓存当前的路由信息
this.$store.dispatch("tagsView/delAllCachedViews", item);
}
},