同域名、同项目、仅 hash 变化，window.location.href 不跳转
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<blockquote>
<p>两个 URL 只有 hash 后面的内容不同，浏览器会认为没有真正跳转，所以 <code>window.location.href</code> 不执行刷新</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">https://域名/cash-center/#/payMethod?params=abc
https://域名/cash-center/#/bindCard?params=12345</pre>
</div>
<h3 data-id="heading-0">原因：浏览器只看 # 号前面的网址，不看 # 号后面的！</h3>
<h4 data-id="heading-1">什么是 Hash？</h4>
<p>URL 中 <code>#</code> 后面的部分叫 hash：</p>
<h4 data-id="heading-2">为什么 window.location.href 不执行？</h4>
<p>浏览器对 hash 变化 的处理方式：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">❌ hash 变化 ≠ 页面跳转</pre>
</div>
<p>变化类型</p>
<p>浏览器行为</p>
<p><code>hash</code> 变化（<code>#/payMethod</code> → <code>#/bindCard</code>）</p>
<p>不刷新页面，只触发 hashchange 事件</p>
<p><code>pathname</code> 变化（<code>/payMethod</code> → <code>/bindCard</code>）</p>
<p>刷新页面</p>
<h4 data-id="heading-3">你的情况</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 当前 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 变了</pre>
</div>
<p>浏览器看到只是 hash 变了，不会刷新页面，SPA 应用内部通过监听 hashchange 来切换路由。</p>
<h3 data-id="heading-4">解决方案</h3>
<h4 data-id="heading-5">方案 1：强制刷新</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.location.href = targetUrl
window.location.reload()// 强制刷新</pre>
</div>
<h4 data-id="heading-6">方案 2：使用 Vue Router（推荐）</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">this.$router.push({
path: '/bindCard',
query: { params: '12345' }
})</pre>
</div>
<h4 data-id="heading-7">方案 3：替换 pathname（不是 hash）</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 构造新 URL 时，换掉 hash 部分
const url = window.location.href.replace('#/payMethod', '#/bindCard')
window.location.href = url</pre>
</div>
<h3 data-id="heading-8">一句话总结</h3>
<blockquote>
<p>hash 变化 ≠ 页面跳转，浏览器只把它当作同一页面的"锚点"变化，不会重新加载。SPA 应用靠监听 hashchange 来处理路由，而不是靠页面刷新。</p>
</blockquote>
<p>比如这样的两个地址</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">https://xxx.com/cash-center/#/payMethodhttps://xxx.com/cash-center/#/bindCard</pre>
</div>
<p>在浏览器眼里，它们是同一个网址！</p>
<p>因为浏览器认为：</p>
<ul>
<li># 后面的东西 = 页面内部的标记</li>
<li>不算新页面</li>
<li>所以你用 <code>window.location.href</code> 改后面的内容</li>
<li>浏览器懒得动，不跳转、不刷新</li>
</ul>
<p>就像：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">一本书 = 网址
书里的页码 = #后面的内容</pre>
</div>
<p>你只是翻页，没换书，浏览器觉得：</p>
<p>不用重新加载，我不跳！</p>
<h4 data-id="heading-9">再简化到极致</h4>
<p># 前面一样 = 同一个页面</p>
<p>改 # 后面 = 只是翻页，不是跳转</p>
<p>所以：</p>
<p><code>window.location.href</code> 不生效！</p>
<h4 data-id="heading-10">你现在必须用的唯一方案（支持返回）</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">this.$router.push('/bindCard')</pre>
</div>
<p>或者</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.location.hash = '/bindCard'</pre>
</div>
<h4 data-id="heading-11">解决方案</h4>
<p>1、用 <code>window.location.hash</code> 跳转</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 拼接新的 hash 路由
const newHash = '#/bindCard?params=12345';
// 直接修改 hash → 自动跳转，自动保留历史记录（可返回）
window.location.hash = newHash;</pre>
</div>
<p><code>2、用 window.location.href</code>（加时间戳强制跳转），已验证过还是行不通</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const baseUrl = 'https://xxx.com/cash-center/';const targetHash = '#/bindCard?params=12345';
// 加时间戳，让浏览器认为是新链接，强制跳转
const fullUrl = baseUrl + targetHash + '&_t=' + Date.now();
window.location.href = fullUrl;</pre>
</div>
<p>同域名、同项目、hash 路由、window.location.href 完全失效，加时间戳也没用，是因为 浏览器认为 hash 变化不算真正的页面跳转。</p>
<h4 data-id="heading-12">注意：这个无法返回上一页，禁用</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.location.replace(url) // ❌ 禁用这个！会清除历史记录，无法返回
window.location.hash = xxx ✅ 可返回
window.location.href = xxx ✅ 可返回
this.$router.push(xxx) ✅ 可返回</pre>
</div>
<p>🚀 最终最稳、最简洁、你直接用的代码</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.location.hash = '/bindCard?params=12345';</pre>
</div>
<div>
<p><strong>3、创建 标签模拟点击</strong>（浏览器无法拦截，强制跳转），已验证这个方法也不行</p>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 目标地址
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);</pre>
</div>
</div>
</div>
</div>
<h3 data-id="heading-13">方法 1：强制修改 location（最推荐，最简单）</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.location.href = window.location.origin + window.location.pathname + '#/bindCard?params=12345'</pre>
</div>
<h3 data-id="heading-14">方法 2：先清空 hash 再赋值（强制触发跳转）</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.location.hash = ''
setTimeout(() => {
window.location.hash = '/bindCard?params=12345'
}, 10)</pre>
</div>
<h3 data-id="heading-15">方法 3：history.pushState + 刷新 hash（Vue 同项目专用）</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">history.pushState({}, '', '/cash-center/#/bindCard?params=12345')
window.dispatchEvent(new HashChangeEvent('hashchange'))</pre>
</div>
<h3 data-id="heading-16">方法 4：location.assign 跳转（支持返回）</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const url = "https://xxx.com/cash-center/#/bindCard?params=12345"window.location.assign(url)</pre>
</div>
<h3 data-id="heading-17">方法 5：iframe 跳转（终极兜底，任何环境都能跳）</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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)</pre>
</div>
<h2 data-id="heading-18">🚀 你现在直接复制这个（100% 必跳）</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 终极万能跳转（任何失效都能用）
window.location.hash = ''
setTimeout(() => {
window.location.hash = '/bindCard?params=12345'
}, 10)</pre>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19915500
頁:
[1]