Next.js如何判断router.back()是否会离站并改为跳转首页？

首先明确：浏览器出于安全策略限制，禁止前端读取历史栈中的跨站URL，所以没有办法直接判断上一页是否属于站外，所有直接检测上一页地址的思路都不可行，最稳妥的方案是自行标记站内导航行为，区分用户进入页面的渠道。

具体实现步骤 #

• 全局标记站内跳转行为
  借助路由全局守卫+标签页级会话存储，记录用户是否通过站内导航进入当前页。sessionStorage是标签页隔离的，关闭标签页自动清空，不会出现不同访问场景的标记串扰。
  通用前端路由的守卫逻辑示例：

  // 全局路由前置守卫，Vue Router/React Router 逻辑一致
  router.beforeEach((to, from) => {
    // 只要来源是站内已注册的有效路由，就打上站内访问标记
    if (from.matched && from.matched.length > 0) {
      sessionStorage.setItem('internal_nav', '1')
    } else {
      // 直达/首次进入场景，清除标记
      sessionStorage.removeItem('internal_nav')
    }
  })
  

• 改造返回按钮的点击逻辑
  点击返回时优先读取标记，判定为站内跳转进入则调用router.back()，否则直接跳转站点首页：

  const handleBackClick = () => {
    const isInternalAccess = sessionStorage.getItem('internal_nav') === '1'
    if (isInternalAccess) {
      router.back()
      // 可选兜底：避免极端场景下back跳转到外站
      setTimeout(() => {
        if (window.location.host !== location.host) router.replace('/')
      }, 80)
    } else {
      router.push('/')
    }
  }
  

• 增加辅助校验兜底
  可以搭配document.referrer做二次校验，补充覆盖标记漏判的场景：如果referrer为空，或者域名和当前站点不一致，直接判定为外站/直达场景。注意referrer存在被用户浏览器策略禁用的可能，仅作为辅助判断项，不要作为唯一依据。
  辅助校验代码：

  const checkFromOutSite = () => {
    if (!document.referrer) return true
    try {
      const referrerHost = new URL(document.referrer).host
      return referrerHost !== window.location.host
    } catch (e) {
      return true
    }
  }
  

避坑提示：不要用history.length判断访问来源，不同浏览器的初始历史栈长度不统一，新标签页打开时的初始值可能是1也可能是2，判断结果完全不可靠。

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