记录网站的访问次数

在App.vue的onMounted中添加代码记录网站的进入， 缺点是刷新页面也算上了。

记录网站页面的离开和进入

在vue-router的全局前置守卫beforeEach中添加代码可以记录页面的离开和进入。

浏览器切换窗口到其它网站了

监听页面可见性改变事件visibilitychange

代码展示

// router/index.js 全局前置守卫监听页面的离开和进入
 router.beforeEach((to, from, next) => {
        if(to.path) {
            to.meta.enterTime = new Date();
            console.log(to.path, "进入时间", to.meta.enterTime)
        }
        if(from.path) {
            console.log(from.path, "离开时间", new Date())
            if(from.meta.enterTime) {
                console.log(from.path, "停留时间", (new Date().getTime() - from.meta.enterTime.getTime())/1000)
            }
        }
        ...
})

// App.vue， 监听页面可见性
onMounted(() => {
  console.log("进入网站")
  document.addEventListener('visibilitychange', hanldeVisible)
})
onBeforeMount(() => {
  console.log("离开网站", route.path)
  document.removeEventListener('visibilitychange', hanldeVisible)
})

const hanldeVisible = (e) => {
  switch (e.target.visibilityState) {
    case 'visible': 
      console.log('网站窗口visible', route.path)
      to.meta.enterTime = new Date();
      console.log(to.path, "进入时间", to.meta.enterTime)
    break;
    case 'hidden':
      console.log('网站窗口hidden', route.path)
      if(route.meta.enterTime) {
        console.log(route.path, "停留时间", (new Date().getTime() - route.meta.enterTime.getTime())/1000)
      }
      break;
    default:
      break;
  }
}

执行结果：