如何在Vue.js组件的created/mounted钩子中获取HTTP Referer？

当然可以实现！不用全局导航守卫，咱们在组件内部就能搞定这个需求——Vue Router提供了组件级路由守卫，完美适配你的场景，下面给你具体的实现方案：

最优方案：使用组件级的beforeRouteEnter守卫 #

这个守卫是Vue Router专为单个组件设计的，它会在组件实例创建之前触发（正好在created钩子之前），能直接拿到from路由对象（也就是来源页信息）。唯一需要注意的是，因为此时组件还没初始化，不能直接用this，但可以通过next的回调函数把来源信息传递给组件实例：

export default {
  data() {
    return {
      sourcePage: '' // 用来存储来源页信息
    }
  },
  // 组件级路由守卫：进入组件前触发
  beforeRouteEnter(to, from, next) {
    // 通过next的回调，把来源页信息注入到组件实例
    next(vm => {
      // vm就是当前组件的实例，这里可以拿到完整的from路由对象
      vm.sourcePage = from.fullPath 
      // 如果需要更详细的信息，比如来源页的参数、名称，也可以用from.path、from.name等
    })
  },
  created() {
    // 现在在created钩子中就能直接访问来源页信息了
    console.log('用户从这个页面过来：', this.sourcePage)
    // 处理边界情况：如果是直接刷新/输入URL进入，from会是空路由对象
    if (!this.sourcePage) {
      console.log('用户是直接访问或刷新页面进入的')
    }
  }
}

备选方案：跳转时手动传递来源参数 #

如果你的场景是从特定页面跳转过来，也可以在跳转时手动把来源页信息通过query参数传递：

比如在来源页的跳转代码里：

// 从A页面跳转到目标页面时，携带来源路径
this.$router.push({
  path: '/target-page',
  query: { from: this.$route.fullPath }
})

然后在目标组件的created钩子中直接获取：

created() {
  const sourcePage = this.$route.query.from
  console.log('来源页：', sourcePage)
}

不过这个方法需要跳转时手动处理，不如组件级守卫灵活自动。

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