关于前端:vue获取referrer

最近有个记录 referrer 的需要，便于剖析页面的流量起源，因为应用 vue 开发的单页面利用，所以打算从 vue-router 登程来解决问题。

导航守卫

最开始打算在这里获取 from，然而发现如同并不能获取到 referrer

beforeRouteEnter(to, from) {
  // 在渲染该组件的对应路由被验证前调用
  // 不能获取组件实例 `this`！// 因为当守卫执行时，组件实例还没被创立！},

document.referrer

Document.referrer 返回的是一个 URI, 以后页面就是从这个 URI 所代表的页面 跳转或关上的.

如果用户间接关上了这个页面（不是通过页面跳转，而是通过地址栏或者书签等关上的），则该属性为空字符串。

这样在 vue 组件的 created、mounted 中都是能够获取到 document.referrer 的。

mounted() {// console.log(document.referrer) // 退出是从 https://segmentfault.com/ 跳转到你的利用那么将会输入
    // https://segmentfault.com/
}

总结

可见从 vue-router 登程并不是解决这个问题的正确方向，document.referrer 十分间接到位。