工具方法: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