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