同域名、同项目、仅 hash 变化，window.location.href 不跳转

两个 URL 只有 hash 后面的内容不同，浏览器会认为没有真正跳转，所以 window.location.href 不执行刷新

https://域名/cash-center/#/payMethod?params=abc
https://域名/cash-center/#/bindCard?params=12345

原因：浏览器只看 # 号前面的网址，不看 # 号后面的！

什么是 Hash？

URL 中 # 后面的部分叫 hash：

为什么 window.location.href 不执行？

浏览器对 hash 变化 的处理方式：

❌ hash 变化 ≠ 页面跳转

变化类型

浏览器行为

hash 变化（#/payMethod → #/bindCard）

不刷新页面，只触发 hashchange 事件

pathname 变化（/payMethod → /bindCard）

刷新页面

你的情况

// 当前 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：强制刷新

window.location.href = targetUrl
window.location.reload()  // 强制刷新

方案 2：使用 Vue Router（推荐）

this.$router.push({
  path: '/bindCard',
  query: { params: '12345' }
})

方案 3：替换 pathname（不是 hash）

// 构造新 URL 时，换掉 hash 部分
const url = window.location.href.replace('#/payMethod', '#/bindCard')
window.location.href = url

一句话总结

hash 变化 ≠ 页面跳转，浏览器只把它当作同一页面的"锚点"变化，不会重新加载。SPA 应用靠监听 hashchange 来处理路由，而不是靠页面刷新。

比如这样的两个地址

https://tank-cash-center-h5.xyuat.com/cash-center/#/payMethod
https://tank-cash-center-h5.xyuat.com/cash-center/#/bindCard

在浏览器眼里，它们是同一个网址！

因为浏览器认为：

• # 后面的东西 = 页面内部的标记
• 不算新页面
• 所以你用 window.location.href 改后面的内容
• 浏览器懒得动，不跳转、不刷新

就像：

一本书 = 网址
书里的页码 = #后面的内容

你只是翻页，没换书，浏览器觉得：

不用重新加载，我不跳！

再简化到极致

# 前面一样 = 同一个页面

改 # 后面 = 只是翻页，不是跳转

所以：

window.location.href 不生效！

你现在必须用的唯一方案（支持返回）

this.$router.push('/bindCard')

或者

window.location.hash = '/bindCard'

解决方案

1、用 window.location.hash 跳转

// 拼接新的 hash 路由
const newHash = '#/bindCard?params=12345';

// 直接修改 hash → 自动跳转，自动保留历史记录（可返回）
window.location.hash = newHash;

2、用 window.location.href（加时间戳强制跳转），已验证过还是行不通

const baseUrl = 'https://tank-cash-center-h5.xyuat.com/cash-center/';
const targetHash = '#/bindCard?params=12345';

// 加时间戳，让浏览器认为是新链接，强制跳转
const fullUrl = baseUrl + targetHash + '&_t=' + Date.now();

window.location.href = fullUrl;

同域名、同项目、hash 路由、window.location.href 完全失效，加时间戳也没用，是因为 浏览器认为 hash 变化不算真正的页面跳转。

注意：这个无法返回上一页，禁用

window.location.replace(url) // ❌ 禁用这个！会清除历史记录，无法返回



window.location.hash = xxx   ✅ 可返回
window.location.href = xxx    ✅ 可返回
this.$router.push(xxx)        ✅ 可返回

🚀 最终最稳、最简洁、你直接用的代码

window.location.hash = '/bindCard?params=12345';

3、创建 标签模拟点击（浏览器无法拦截，强制跳转），已验证这个方法也不行

// 目标地址
const url = "https://tank-cash-center-h5.xyuat.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);

window.location.href = window.location.origin + window.location.pathname + '#/bindCard?params=12345'

window.location.hash = ''
setTimeout(() => {
  window.location.hash = '/bindCard?params=12345'
}, 10)

history.pushState({}, '', '/cash-center/#/bindCard?params=12345')
window.dispatchEvent(new HashChangeEvent('hashchange'))

const url = "https://tank-cash-center-h5.xyuat.com/cash-center/#/bindCard?params=12345"
window.location.assign(url)

const url = "https://tank-cash-center-h5.xyuat.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)

// 终极万能跳转（任何失效都能用）
window.location.hash = ''
setTimeout(() => {
  window.location.hash = '/bindCard?params=12345'
}, 10)