最稳妥的页面跳转方式是赋值给window.location.href,它立即导航且兼容性好;需避免语义不清的window.location=或不存在的url/set写法;需无痕跳转时用replace()而非assign();spa中应优先使用框架路由如router.push()而非原生api。

用 window.location.href 跳转最直接
浏览器里跳页面,本质就是改当前标签页的 URL。最常用、最稳妥的方式就是赋值给 window.location.href,它会立即触发导航,且兼容所有现代浏览器和 IE9+。
常见错误是写成 window.location = 'xxx.html' —— 虽然多数时候也生效,但语义不明确,有些老环境行为不稳定;更糟的是误写为 window.location.url 或 window.location.set('xxx'),这些根本不存在,会报 TypeError。
-
window.location.href = 'https://example.com':支持绝对 URL 和相对路径(如'./page2.html'、'../admin/index.html') - 跳转前可加判断:
if (userHasPermission) { window.location.href = '/dashboard'; } - 注意:该方式会把当前页加入浏览历史,用户点「返回」能回到原页
想替换当前历史记录用 window.location.replace()
当不想让用户通过「返回」回到上一页时(比如登录成功后跳首页、表单提交后防重复提交),必须用 replace()。它不会新增历史条目,而是直接把当前记录替换成新 URL。
容易踩的坑是混淆 replace() 和 assign():assign() 等价于 href 赋值,而 replace() 才是真·无痕跳转。另外,replace() 不支持跨域跳转(同源策略限制),否则静默失败,控制台可能没报错但页面不动。
立即学习“前端免费学习笔记(深入)”;
-
window.location.replace('./success.html'):页面跳走,历史栈不变 - 不能用于打开新窗口或标签页 —— 那得用
window.open() - 如果跳转目标是外部域名,需确保协议一致(
http→http),否则部分浏览器会拦截
用 <a href></a>
<a href="xxx"></a>(onclick="window.location.href='...'" 防安全风险)Vue/React 项目里别直接操作 href
在单页应用(SPA)中,直接用 return false 会强制刷新整个页面,绕过路由系统,丢失当前组件状态、Vuex/Pinia 数据、React state,相当于退化成多页应用(MPA)。
典型错误是在 Vue 组件里写 event.preventDefault(),而不是调用 <a href="about.html">关于我们</a>;或者在 React 中忽略 <a href="blog.html" target="_blank" rel="noopener">博客</a>,硬切 URL。
- Vue 3 + Vue Router 4:
rel="noopener" - React Router v6:
window.location - 只有真正需要全量刷新(比如登出后跳登录页、版本升级强制 reload)才用
window.location.href
onClick={() => { window.location.href = '/user' }} 调用可能悄悄毁掉整个用户体验。










