Vue Router中goBack回退跳出站点时如何设置兜底路径/路由

你现在写的判断逻辑只能识别「浏览器历史栈里有没有上一条记录」，但受浏览器安全策略限制，前端根本拿不到历史栈中上一条记录的完整URL，自然没法判断上一条是不是本站页面，所以才会出现用户从外链点进来、或者直接输地址进页面时，点返回直接跳出站点的问题。

搭配document.referrer（即页面的来源地址）做双重校验就能满足需求，判断规则很简单：

• 历史栈压根没有上一条记录的，直接跳首页
• 有上一条记录，但来源地址为空（对应直接输URL、隐私模式访问、跨域跳转不带来源的场景），或者来源地址域名和当前站点不一样的，直接跳首页
• 剩下的情况正常执行返回上一页就行

setup(props, { attrs }) {
    const router = useRouter()
    const { t } = useI18n()

    const goBack = (): void => {
      if (attrs.onClick) return

      const currentSiteOrigin = window.location.origin
      const referrer = document.referrer
      const hasPrevHistory = router.options.history.state.back !== null
      const prevPageIsInternal = referrer.startsWith(currentSiteOrigin)

      if (!hasPrevHistory || !prevPageIsInternal) {
        router.replace('/')
        return
      }
      
      router.back()
    }

    return {
      t,
      goBack
    }
  }
})
</script>

• 这个方案能覆盖绝大多数常规访问场景，就算遇到用户浏览器手动禁用了来源传递的极端情况，也会默认走跳首页逻辑，绝对不会跳出站点。
• 如果需要100%精准判断，你可以在所有站内路由跳转的时候往sessionStorage里写一个访问路径标记，点返回的时候先查这个标记有没有对应记录，没有就跳首页。但这个方案需要给所有站内跳转逻辑加埋点，维护成本高，普通业务场景用上面的方案完全够用。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo