[JavaScript知识库]vue埋点 记录页面停留时间

vue记录使用日志 页面停留时间

import API from '@/modules/system/api/api_userTime'
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})
//   API   保存数据接口
let startTime = Date.now()
let currentTime
let standingTime = 0
let pageName = []
router.beforeEach((to, from, next) => {
    // 如果to存在，则说明路由发生了跳转
    if (to) {
        // 清空界面名
        pageName=[]
        // 离开界面
        // 第一步：页面跳转后记录一下当前的时间 currentTime
        currentTime = Date.now()
        standingTime = parseInt((currentTime - startTime) / 1000)
        from.matched.forEach(routeItem => {
            pageName.push(routeItem.meta.title)
        })  
        // ------------
        // 第二步：在这里把 currentTime - startTime 的 差值 发送给后端
        // ------------

        if(pageName.length > 0){
            const params = {
                // 界面
                pageName: pageName.join("-"),
                // 进入界面时间
                gmtCreate: '',
                // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
                // 离开时间
                gmtLeave: '',
                // gmtLeave: new moment(currentTime).format('YYYY-MM-DD HH:mm:ss'),
                /**
                 * 进入或离开状态
                 * enter进入
                 * exit 离开
                 */
                type: 'exit',
                // 停留时长
                // duration: standingTime
            }
            API.add(params).then(function(result) {
                console.log(result)
            }).catch(function(result) {
                // console.log(result)
            })
        }
        // 第三步：每次都要初始化一下 startTime
        startTime = Date.now()
        pageName = []
        // console.log('======== 分割线 ========')
    }
    if(from){
        // 进入界面
        to.matched.forEach(routeItem => {
            pageName.push(routeItem.meta.title)
        })  
        if(pageName.length > 0){
            const param = {
                // 界面
                pageName: pageName.join("-"),
                // 进入界面时间
                gmtCreate: '',
                // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
                // 离开时间
                gmtLeave: '',
                 /**
                 * 进入或离开状态
                 * enter进入
                 * exit 离开
                 */
                type: 'enter'
            }
            console.log(param);
            API.add(param).then(function(result) {
                console.log(result)
            }).catch(function(result) {
                // console.log(result)
            })
        }
    }
    next()
})
export default router