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非常直接到位。