关于前端: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十分间接到位。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据