前端埋点

指令式埋点 //统计点击按钮 Vue.directive('stat', { bind(el, binding) { el.addEventListener('click', () => { const data = binding.value; console.log(data) }, false); } }); // 调用 <button type="info" v-stat="{a:1}">自定义指令</button> /*全局PV统计*/ let startTime=''; let endTime=''; router.beforeEach((to, from, next) => { let flag = localStorage.getItem("user") !== null ? true: false; startTime=new Date().getTime(); let data = { type: 'visit', user_id: flag ? JSON.parse(localStorage.getItem("user")).id: '获取不到userId', time: (new Date()).getTime(), params: { from: { name: from.name || '', path: from.path || '', query: from.query || '' }, to: { name: to.name || '', path: to.path || '', query: to.query || '' } } } App.methods.logEvent(data); next() }) //页面停留时间 //maidian.js export default { data() { return { startTime:new Date().getTime(), endTime:'' } }, methods: { } } // vue页面 mixins: [maidian], beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined console.log(to, '组件独享守卫beforeRouteEnter第一个参数'); console.log(from, '组件独享守卫beforeRouteEnter第二个参数'); console.log(next, '组件独享守卫beforeRouteEnter第三个参数'); next(vm => { // vm.startTime=new Date().getTime() //因为当钩子执行前，组件实例还没被创建 // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。 console.log(vm.startTime);//当前组件的实例 }); }, beforeRouteLeave(to, from, next) { console.log(from) this.endTime=new Date().getTime(); console.log(this.endTime-this.startTime) this.$destroy() next(vm=>{ }) },