这种需求手机端和pc端一般是不存在的，因为都是可以手动操作刷新的。
最近在做一个户外社区大屏的项目，因为大屏是全屏显示，没法手动刷新，不可能在页面专门做一个刷新按钮，也不好看，那这样的需求就显得格外重要了。
首先我们来分析一下需求：
1.15分钟——需要定时器
2.无操作——监控页面上的点击、触摸、滑动等事件
我们只需要设置一个定时器，在一进入页面的时候就开始计时，如果15分钟内有点击、触摸、滑动等操作时就重新计时，时间一到就切换路由。
而且我们还需要新建一个空白组件rbck.vue（路由名字随意），切换时先跳转到 /rbck ,在rbck.vue里立即执行跳转到首页，达到重定向并刷新的效果。
在main.js里
配置路由
import rbck from './components/rbck.vue'
const routes = [
{
path: '/rbck',
meta: {
title: '跳转页',
scrollToTop: true
},
component:rbck,
}
]
created() {
this.isTimeOut();
}
data() {
return {
timeOut: ''
}
},
methods: {
//页面15分钟无操作时返回首页
startTimer() {
let that = this;
clearInterval(that.timeOut);
that.timeOut = setInterval(function () {
that.$router.push({path: '/rbck'})
},1000*60*15)
},
isTimeOut() {
let that = this;
if(that.$route.path == "/") {
that.startTimer();
}
document.body.onmouseup = that.startTimer;
document.body.onmousemove = that.startTimer;
document.body.onkeyup = that.startTimer;
document.body.onclick = that.startTimer;
document.body.ontouchend = that.startTimer;
},
}
解决跳转之前路由等于跳转之后路由问题：
watch: {
'$route' (to, from) {
if (to.path == from.path) {
this.$router.push({
path: '/rbck'
})
}
}
},
rbck.vue代码如下：
<script type="text/ecmascript-6">
export default{
data(){
return{ }
},
created () {
this.backFun();
},
methods: {
backFun() {
this.$router.replace({path: '/'})
}
},
components:{ }
}
</script>
