js跳转到指定url

用JavaScript跳转到指定URL，跳转最直接的到指定方式就是操作 window.location 对象。这行代码你可能已经写了几百遍：

window.location.href = 'https://example.com';

它会把当前页面导航到新地址，跳转浏览器历史记录里会多一条。到指定用户点后退，跳转能回到你跳转前的到指定页面。这是跳转最常见的场景，表单提交成功后跳转到结果页，到指定或者登录过期后踢回登录页，跳转都用它。到指定

但 location.href 不是跳转唯一选择。还有个 location.replace()，到指定差别在于它不往历史栈里塞新记录。跳转什么时候用？到指定支付完成后的跳转。用户不应该按后退回到支付页，跳转否则可能触发重复提交。replace 直接替换当前历史条目，后退按钮会跳过你的页面，回到更早的页面。这个细节很多人忽略，直到线上出了重复扣款的事故才回头改。

window.location.replace('https://example.com/result');

还有 location.assign()，效果和 href 赋值几乎一样，也会留下历史记录。区别微乎其微，实际项目里用哪个看团队习惯。我倾向于统一用 href，因为可读性更好，一眼就知道在改地址。

如果你在单页应用里工作，比如 React 或 Vue 项目，直接改 window.location 会触发整页刷新。状态全丢，体验割裂。这时候该用路由库的方法。React Router 的 useNavigate，Vue Router 的 router.push。它们走的是 History API，不会重新加载文档。

// React Router v6 const navigate = useNavigate(); navigate('/dashboard'); // Vue Router 4 router.push('/dashboard');

History API 本身也能用，history.pushState 改地址栏但不发请求，history.replaceState 同理。但手动调这些 API 需要自己处理路由匹配和视图更新，除非你在写框架，否则没必要重复造轮子。

跳转时有个坑：URL 里的特殊字符。用户输入的关键词带空格、中文、& 符号，直接拼进地址会出问题。得用 encodeURIComponent 处理。

const keyword = '前端 & 后端'; window.location.href = '/search?q=' + encodeURIComponent(keyword);

反过来，从 URL 里取参数要用 decodeURIComponent，不然拿到的是 %20 这种编码后的字符串。这对操作在表单提交和搜索跳转里特别常见，漏掉一个就会导致参数解析错误。

还有一种跳转是打开新窗口。window.open(url, '_blank') 会新开标签页，原页面不动。适合外部链接或者需要保留当前上下文的场景。但浏览器会拦截非用户触发的 window.open，比如在 setTimeout 里调用，大概率被当成弹窗广告屏蔽。得确保它发生在点击事件的处理函数里。

document.getElementById('link').addEventListener('click', () => {  window.open('https://example.com', '_blank'); });

服务端跳转和客户端跳转是两回事。HTTP 的 301、302 响应由浏览器自动处理，JS 管不着。但有些场景下前端需要根据接口返回的 redirectUrl 字段决定去哪，这时候就是纯 JS 跳转的活儿了。

移动端有个特殊情况：唤起 App。用自定义协议比如 myapp://page，iOS 和 Android 的处理不一样。iOS 9 之后 Safari 会弹确认框，Android 则看有没有注册 intent。这块水很深，通常配合 Universal Link 或 App Link 使用，纯 JS 方案只能做降级。

最后提一个容易翻车的点：在 beforeunload 事件里做跳转。用户关闭页面时触发，但浏览器对这里的同步操作限制很严，异步请求基本发不出去。真要上报数据得用 navigator.sendBeacon，它专门为这种场景设计，不阻塞页面卸载。

跳转本身不复杂，复杂的是跳转的时机、方式和后续影响。选 href 还是 replace，用路由还是原生 API，处理不处理编码，每一个选择背后都有具体的业务考量。写之前想清楚用户按后退会看到什么，基本就不会出大错。