App.vue是vue页面资源的首加载项，是主组件，页面入口文件。所有页面都是在App.vue下进行也换的，APP.vue 负责构建定义及页面组件归集

需求

1.打开页面的时候，记录当前页面

2.切换页面的时候，记录在当前页面的停留时间

<template><div id="app"><keep-alive><router-view /></keep-alive>   </div>
</template>

<script>
import { saveUseLogs } from './api/common.js'
import { isEmptyObject } from './utils/validate.js'
export default {name: 'App',data() {return {routeUrl: '',beforeUnloadTime: '',gapTime: '',leavePath: {},}},watch: {$route: {handler: function (val, oldVal) {const now = Date.now()const gapTime = now - this.curTimethis.curTime = nowthis.watchRouteChangeEvent(2, oldVal, gapTime)this.watchRouteChangeEvent(1, val)},// 深度观察监听deep: true,},},mounted() {var that = this// 监听浏览器是否关闭window.addEventListener('beforeunload', (e) => that.browerStatus(e))},beforeDestroy() {window.removeEventListener('beforeunload', (e) => this.browerStatus(e))},methods: {browerStatus() {this.beforeUnloadTime = new Date().getTime()this.leavePath = Object.assign({}, this.$route)this.watchRouteChangeEvent(2, this.leavePath)},watchRouteChangeEvent(type, urlObj, gapTime = 0) {if (isEmptyObject(urlObj)) {return}let routerName = urlObj.fullPath.split('/').reverse()[0]let params = {type,sysType: 1,actionType: 1,remoteTitle: routerName,}if (type === 2) {params.duration = gapTime / 1000}saveUseLogs(params).catch((err) => {console.log('路由监听接口报错', err)})},},
}
</script>

3.点击--埋点