html超链接跳转代码 点击链接怎么跳转页面【实例】

最简跳转用，避免href=””或#；新标签页需target=”_blank”加rel=”noopener”；js跳转优先onclick返回false拦截，慎用window.location.href赋值；location.replace()不保留历史，assign()等同点击链接；spa中用link/而非裸。

点击链接跳转页面的最简写法

直接用 <a></a> 标签加 href 属性，浏览器原生支持，不依赖 JS，兼容性最好。

• href 值为相对路径（如 "./about.html"）、绝对路径（如 "/login"）或完整 URL（如 "https://example.com"）都行
• 避免写空字符串 href="" 或 href="#"——前者可能刷新当前页，后者会滚到页面顶部，都不是真跳转
• 如果目标是新标签页，加 target="_blank"，但务必同时加 rel="noopener" 防安全风险

为什么 onclick 里写 window.location.href 不推荐

纯前端跳转能绕过 HTML 语义，但代价明显：seo 不收录、右键无“在新标签打开”选项、屏幕阅读器体验差、移动端长按无法唤出菜单。

• 常见错误：用 <div onclick="window.location.href='page.html'"> 模拟链接——这不是链接，是按钮，语义错位 <li>如果必须用 JS 控制（比如跳转前要校验登录态），优先用 <code><a href="..." onclick="return checkLogin()">，函数返回 <code>false 才阻止跳转
• window.open() 更危险：很多浏览器默认拦截，且新开页没有 opener 上下文，window.close() 在多数情况下已失效

location.replace() 和 location.assign() 的区别

两者都用于 JS 跳转，但历史记录行为不同：用户点返回时，replace() 会跳过当前页，assign() 会回到它。

• 想让用户无法返回上一页（比如登录成功后跳首页），用 location.replace("home.html")
• 普通导航就用 location.assign("list.html")，和点击链接效果一致
• 别用 location.href = "xxx" 赋值——虽然可行，但语义模糊，且某些老版本 safari 对该写法有兼容问题

SPA 场景下点击链接不刷新页面，但 URL 变了

这是前端路由（如 React router、Vue Router）的正常行为，本质是调用 history.pushState() 或 history.replaceState() 修改 URL，再手动渲染内容。

立即学习“前端免费学习笔记（深入）”；

• 不是所有链接都该走前端路由：外部链接、PDF、下载文件等，仍需原生 <a href="..."></a>
• 用 Link 组件（React Router）或 <router-link></router-link>（Vue）代替裸 <a></a>，它们内部做了 preventDefault + history API 调用
• 手写 history.pushState() 时，记得同步更新 document.title，否则浏览器历史项标题还是旧的

实际项目里最容易被忽略的是：混合使用前端路由和原生跳转时，没统一处理 target="_blank" 场景——新标签页打开的仍是 SPA 入口，但没带路由参数，结果白屏。这种问题往往线上才暴露。