अभी लॉगिन करें 页面跳转大概是前端开发里出现频率最高的需求之一了：登录成功要跳首页，表单提交完要跳结果页，旧链接失效了还得把访客引到新地址。在 HTML5 页面里用 JavaScript 做这件事，核心思路就一条——操作 window.location 对象。不过具体写法有好几种，行为细节也各有差别，值得分清楚。
最常见的做法是直接给 window.location.href 赋值。location.href 本质上就对应浏览器地址栏里的内容，把一个新 URL 交给它，浏览器立刻就会导航过去。逻辑不复杂的话，代码直接写在 HTML 的 <script> 标签里就行：
<!DOCTYPE html>
<html>
<head>
<title>页面跳转示例</title>
</head>
<body>
<button onclick="goToNewPage()">点击跳转</button>
<script>
function goToNewPage() {
window.location.href = 'https://www.example.com'; // 修改为你想跳转到的URL
}
</script>
</body>
</html>
用户点一下按钮，
goToNewPage() 被触发，href 一改，页面就走了。简单直接，页面少、逻辑轻的时候这么写完全够用。但如果跳转逻辑比较重，或者同一个函数要在好几个页面里复用，把 JavaScript 抽成外部文件会更干净。先建一个
script.js，把跳转函数放进去：// script.js
function goToNewPage() {
window.location.href = 'https://www.example.com'; // 修改为你想跳转到的URL
}
然后在 HTML 里通过
src 引入这个文件，按钮照旧绑定事件：<!DOCTYPE html>
<html>
<head>
<title>页面跳转示例</title>
</head>
<body>
<button onclick="goToNewPage()">点击跳转</button>
<script src="script.js"></script>
</body>
</html>
这样做的好处是结构和行为分离：HTML 只管页面骨架，JS 负责交互逻辑。以后跳转地址变了，打开
script.js 改一行就行，不用挨个页面去翻。除了
href，还有一个行为略有不同的方法：window.location.replace()。用法上两者几乎一模一样：function goToNewPageReplace() {
window.location.replace('https://www.example.com'); // 修改为你想跳转到的URL
}
真正的差别藏在浏览器历史记录里。用
href 跳转时，新页面会被压进历史栈，用户点浏览器的"后退"按钮还能回到原页面；replace() 则是用新页面替换掉当前这条历史记录，后退键就回不来了。什么时候需要这种"回不去"的效果？登录场景就很典型——用户登录成功进入后台首页，你肯定不希望他随手一个后退又回到登录页发呆。类似的还有支付完成页、已经失效的活动入口，用 replace() 把来路封死，体验反而更顺。顺带一提，
location.assign('url') 也能实现跳转，效果和给 href 赋值基本一致，历史记录照常保留，可以当作同义写法。如果想做"3 秒后自动跳转"这类延时效果，在外面包一层 setTimeout 就够了：
setTimeout(function() {
window.location.href = 'https://www.example.com';
}, 3000);
最后说几个容易踩坑的地方。
跳转目标一定要先验证。URL 拼错一个字符、漏了
https:// 协议头，跳过去的结果可能和预期完全不同；相对路径和绝对路径的行为差异也要心里有数，目标页面本身还得确保有权限访问。SEO 层面也要谨慎对待 JavaScript 跳转。搜索引擎对 JS 跳转的处理不如服务器端重定向来得干脆，如果是网站改版、域名迁移这类永久性跳转，更稳妥的方案是让服务器返回 301（永久重定向）或 302（临时重定向）状态码，权重传递更明确。JS 跳转更适合由用户交互驱动的场景，整站迁移的任务还是别交给它了。
另外，一旦跳转条件多起来——比如要根据用户角色跳不同页面、根据时间判断活动是否结束——就把判断逻辑老老实实封装进函数里，别散落在各个
onclick 中。集中管理的好处不用多说：改一处，处处生效，排查问题也快得多。