0


解决前端若依框架菜单栏路由跳转右侧页面不刷新bug

背景:在使用若依框架时发现一个问题,左侧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);}},
代码完整截图:

在这里插入图片描述

标签: 前端 前端框架

本文转载自: https://blog.csdn.net/PolarisWay/article/details/140471279
版权归原作者 卡卡卡蜜尔 所有, 如有侵权,请联系我们删除。

“解决前端若依框架菜单栏路由跳转右侧页面不刷新bug”的评论:

还没有评论