工具方法:js设置iframe的src为哈希路由(Hash模式)时地址改变页面也不刷新生效处理

工具方法:js设置iframe的src为哈希路由(Hash模式)时地址改变页面也不刷新生效处理

Hash路由模式替换地址页面也不更新,History模式正常

处理方案:

在 # 前加随机数或时间戳即可

示例方法:

  onReset(item, index, e) {
    e.stopPropagation();
    const getIframe = document.querySelectorAll('.inner-iframe')[index];
    if (getIframe) {
      // 针对hash路由,尾部添加随机参数不生效,在/#/前添加随机数
      if (item.path.split('?')[0].includes('/#/')) {
        const pathArr = item.path.split('/#/');
        const newPath = `${pathArr[0]}/_t=${Math.random() * 1e18}/#/${pathArr[1]}`;
        getIframe.setAttribute('src', newPath);
      } else {
      	// history 模式在尾部添加。根据实际项目判断是? 拼接还是 & 拼接
        const newPath = `${item.path}&_t=${Math.random() * 1e18}`;
        getIframe.setAttribute('src', newPath);
      }
    }
  }

效果示例:

原本:https://aa.com/#/bbb

Hash刷新:https://aa.com/_t=374410860055044000/#/bbb

History刷新:https://aa.com/#/bbb?_t=374410860055044000

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值