最稳妥的页面跳转方式是赋值给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> 标签是最轻量的声明式跳转
纯静态跳转，不用 JS 也能完成，优先用 HTML 原生 <a href="xxx"></a>。它天然支持右键「在新标签页打开」、中间键点击、书签保存，还对屏幕阅读器友好。
常见问题是加了 onclick="window.location.href='...'" 还保留 href，结果点击时触发两次跳转；或者为了“阻止默认”却忘了 return false 或 event.preventDefault()，导致跳转和 JS 逻辑冲突。
- 基础写法：
<a href="about.html">关于我们</a> - 新标签页：
<a href="blog.html" target="_blank" rel="noopener">博客</a>（rel="noopener"防安全风险） - 避免内联 JS 跳转，除非需要动态生成 URL 或做权限校验
Vue/React 项目里别直接操作 window.location
在单页应用（SPA）中，直接用 window.location.href 会强制刷新整个页面，绕过路由系统，丢失当前组件状态、Vuex/Pinia 数据、React state，相当于退化成多页应用（MPA）。
典型错误是在 Vue 组件里写 onClick={() => { window.location.href = '/user' }}，而不是调用 router.push('/user')；或者在 React 中忽略 useNavigate()，硬切 URL。
- Vue 3 + Vue Router 4：
const router = useRouter(); router.push('/profile'); - React Router v6：
const navigate = useNavigate(); navigate('/settings'); - 只有真正需要全量刷新（比如登出后跳登录页、版本升级强制 reload）才用
window.location.replace()
window.location 调用可能悄悄毁掉整个用户体验。 
