同域名、同项目、仅 hash 变化，window

什么是HashURL中#后面的部分叫hash :为什么不执行window.location.href浏览器对hash变化处理方式:1❌ hash 变化 ≠ 页面跳转变异类型浏览器行为hash变化(#/payMethod→#/bindCard不刷新页面只是触发hashchange事件pathname变化(/payMethod→/bindCard革新版面你的情况123456// 当前 URLwindow.location.href https://xxx.com/cash-center/#/payMethod?paramsabc// 目标 URL只有 hash 不同window.location.href https://xxx.com/cash-center/#/bindCard?params12345// ^^^^^^^ hash 变了浏览器只是hash变更了会更新页面SPA应用内部通过监听hashchange来切换路径。解决方案方案1 :强制刷新12window.location.href targetUrlwindow.location.reload()// 强制刷新方案2 :使用Vue Router (推荐)1234this.$router.push({path:/bindCard,query: {params:12345}})方案3 :货币pathname (是非散列)123// 构造新 URL 时换掉 hash 部分consturl window.location.href.replace(#/payMethod,#/bindCard)window.location.href url一句话总结hash变化≠页面跳跃浏览器只把它当作同一页面的锚点变化不会重新加载。 SPA用靥监听hashchange来处理路由而非靥页面刷新。如今的两个地址1https://xxx.com/cash-center/#/payMethodhttps://xxx.com/cash-center/#/bindCard在浏览器眼里寃们是同一个网址因为浏览机器:#后面的东西页面内部的标记预算新页面所以你用window.location.href改后面的内容浏览器获动不跳不跳不刷新就像:12一本书 网址书里的页码 #后面的内容你只是翻页没换书浏览器掌握:重新加载我不跳再简化到极致#前面一个同一个页面改#后面只是翻页不是跳因为:window.location.href不生败类你现在必须用的唯一方案(支持回复)1this.$router.push(/bindCard)或者1window.location.hash /bindCard解决方案1、用window.location.hash跳墙12345// 拼接新的 hash 路由constnewHash #/bindCard?params12345;// 直接修改 hash → 自动跳转自动保留历史记录可返回window.location.hash newHash;2、用 window.location.href(加时间户强制跳跃)已惊人证过是行不通的123456constbaseUrl https://xxx.com/cash-center/;consttargetHash #/bindCard?params12345;// 加时间戳让浏览器认为是新链接强制跳转constfullUrl baseUrl targetHash _t Date.now();window.location.href fullUrl;该名称同项目hash经由window.location.href完全失败加时间户也没有使用因此浏览机器认为hash变化不算真正的页面。注意:禁止回复禁止回复1234567window.location.replace(url)// ❌ 禁用这个会清除历史记录无法返回window.location.hash xxx ✅ 可返回window.location.href xxx ✅ 可返回this.$router.push(xxx) ✅ 可返回最终最简最简你直接用的代码1window.location.hash /bindCard?params12345;3、创建抓阄模拟点破(浏览器无法拔取、强制跳动)已惊证方法也不行123456789// 目标地址consturl https://xxx.com/cash-center/#/bindCard?params12345;// 创建 a 标签consta document.createElement(a);a.href url;a.target _self;// 在当前页面打开 → 可以返回上一页document.body.appendChild(a);a.click();// 模拟点击document.body.removeChild(a);方法1 :强制修改location (最推荐最简单单位)1window.location.href window.location.origin window.location.pathname #/bindCard?params12345方法2 :先清空hash再赋侧(强制触发跳跃)1234window.location.hash setTimeout(() {window.location.hash /bindCard?params12345}, 10)方法3:history.pushState 刷新hash(Vue同项目专用)12history.pushState({},,/cash-center/#/bindCard?params12345)window.dispatchEvent(newHashChangeEvent(hashchange))方法4:location.assign跳羚(支持回复)1consturl https://xxx.com/cash-center/#/bindCard?params12345window.location.assign(url)方法5:iframe跳水(终极温暖任何环境都能跳)123456789consturl https://xxx.com/cash-center/#/bindCard?params12345constiframe document.createElement(iframe)iframe.style.display noneiframe.src urldocument.body.appendChild(iframe)setTimeout(() {document.body.removeChild(iframe)}, 50)你现在直接复制次数( 100%必跳)12345// 终极万能跳转任何失效都能用window.location.hash