JavaScript实现无刷新跳转首页：解决弹窗确认后打开新标签页的问题

当前代码里window.open("./Tutorial2", "Thanks for Visiting!")的第二个参数为自定义窗口名，浏览器检索不到同名的已存在窗口/标签时，会默认新开标签页加载目标地址，完全不符合同页跳转的需求。

基础调整：实现不打开新标签页的跳转 #

直接弃用window.open的跨窗口导航逻辑，替换为当前标签页内的导航写法：

• 移除自定义窗口名的传参，如果需要普通整页跳转（可后续再优化为无重载），直接写为window.location.href = "./Tutorial2"即可，逻辑会在当前标签页直接导航到目标地址，不会触发新标签打开。

进阶调整：实现不触发整页重载的跳转 #

要做到跳转过程无整页刷新，不能直接修改location.href，需要借助前端路由能力实现无刷新内容替换：

• 原生JS无框架场景：直接调用History API实现路由变更，核心代码为：

  // 修改当前页面路由地址，不触发整页重载
  history.pushState({}, "", "./Tutorial2")
  // 补充对应逻辑：将页面可视区域内容替换为Tutorial2对应的页面内容即可
  

• Vue/React等带官方路由的框架场景：直接调用内置路由的跳转方法即可，框架本身已经内置了无重载的跳转能力：
  • Vue Router：调用router.push("/Tutorial2")
  • React Router：调用navigate("/Tutorial2")

完整可落地的无重载跳转代码示例 #

if (window.confirm("Do you really want to leave?")) {
  // 按你的技术栈替换为对应路由跳转方法即可
  history.pushState({}, "", "./Tutorial2")
  // 这里补充页面内容渲染逻辑，加载Tutorial2对应的组件/内容
}

内容的提问来源于stack exchange，提问作者halaajin