背景:在使用若依框架时发现一个问题,左侧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);}},
代码完整截图:
版权归原作者 卡卡卡蜜尔 所有, 如有侵权,请联系我们删除。