vue实现访问量
Vue 实现访问量统计的方法
使用前端计数
在 Vue 中可以通过简单的计数逻辑实现访问量统计，但这种方式仅适用于前端展示，数据不会持久化。
<template>
<div>
<p>访问量: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
mounted() {
this.count = localStorage.getItem('visitCount') || 0
this.count++
localStorage.setItem('visitCount', this.count)
}
}
</script>结合后端 API
更可靠的方案是通过后端 API 记录访问量，前端仅负责显示数据。
<template>
<div>
<p>访问量: {{ visitCount }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
visitCount: 0
}
},
async created() {
const response = await axios.get('/api/visits')
this.visitCount = response.data.count
await axios.post('/api/visits')
}
}
</script>使用第三方服务
可以集成 Google Analytics 等第三方统计服务：
-
安装 vue-gtag 插件
npm install vue-gtag -
在 main.js 中配置
import VueGtag from 'vue-gtag'
Vue.use(VueGtag, { config: { id: 'GA_MEASUREMENT_ID' } })
3. 在组件中跟踪页面浏览
```javascript
this.$gtag.pageview({
page_path: window.location.pathname
})使用 Cookie 识别唯一访客
为避免重复计数，可以使用 Cookie 识别唯一用户：
import Cookies from 'js-cookie'
export default {
methods: {
checkVisitor() {
if (!Cookies.get('visited')) {
this.recordVisit()
Cookies.set('visited', 'true', { expires: 1 })
}
},
async recordVisit() {
await axios.post('/api/visits')
}
},
mounted() {
this.checkVisitor()
}
}注意事项
- 前端计数易被清除，适合非关键数据展示
- 重要统计应使用后端服务确保数据可靠性
- 考虑 GDPR 等隐私法规，必要时获取用户同意
- 高流量网站建议使用专业统计服务如 Google Analytics 或 Matomo
