Next.js中如何仅历史含本站页面时调用router.back()否则跳转首页

完全可以实现，核心逻辑是先判断当前是否存在可返回的站内历史记录，再选择执行返回上一页还是跳首页的逻辑，以下是具体实现方案：

核心判断逻辑 #

• 若当前标签页是新打开的（window.history.length 为1），无任何浏览历史，直接跳转首页
• 若上一页来源为外站，直接跳转首页
• 若上一页为站内页面，调用router.back()返回

代码实现示例 #

Vue3 + Vue Router 实现 #

import { useRouter } from 'vue-router'

const router = useRouter()
// 替换为你的应用实际域名
const APP_DOMAIN = 'your-app-domain.com'

const handleCancel = () => {
  // 新标签页打开无历史记录场景
  if (window.history.length <= 1) {
    router.push('/')
    return
  }

  try {
    // 校验上一页来源是否为站内
    const referrerHost = new URL(document.referrer).host
    if (!referrerHost.includes(APP_DOMAIN)) {
      router.push('/')
      return
    }
  } catch (err) {
    // 处理referrer为空/非法的异常场景
    router.push('/')
    return
  }

  // 符合条件直接返回上一页
  router.back()
}

React + React Router 实现（v6版本） #

import { useNavigate } from 'react-router-dom'

const PublishPage = () => {
  const navigate = useNavigate()
  const APP_DOMAIN = 'your-app-domain.com'

  const handleCancel = () => {
    if (window.history.length <= 1) {
      navigate('/')
      return
    }

    try {
      const referrerHost = new URL(document.referrer).host
      if (!referrerHost.includes(APP_DOMAIN)) {
        navigate('/')
        return
      }
    } catch (err) {
      navigate('/')
      return
    }

    navigate(-1)
  }

  // 其余组件逻辑
}

更稳定的优化方案 #

如果担心浏览器隐私策略限制document.referrer为空，可以通过全局路由守卫存储最近的站内路由路径，不受referrer限制：

1. 全局路由守卫中存储上一个站内路径（以Vue为例）

router.beforeEach((to, from, next) => {
  if (from.fullPath) {
    sessionStorage.setItem('lastInternalPath', from.fullPath)
  }
  next()
})

2. 发布页取消逻辑调整

const handleCancel = () => {
  const lastInternalPath = sessionStorage.getItem('lastInternalPath')
  // 存在有效的站内上一路径则返回，否则跳首页
  if (lastInternalPath && lastInternalPath !== '/publish') {
    router.back()
  } else {
    router.push('/')
  }
}

注意：sessionStorage为标签页隔离存储，不会出现多标签页历史互相干扰的问题。

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