解决前端若依框架菜单栏路由跳转右侧页面不刷新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);
      }
    },
代码完整截图:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值