Vue无感知刷新页面

Posted 2023-03-27

参考技术A

1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面，页面可以不进行刷新；

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好；

3.解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖， 不论组件层次有多深 ，并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

其它组件如：role.vue

在其它要调用 this.reload 的组件添加inject属性：

然后可以在你的相应的方法中调用：

4.provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

Vue 页面15分钟无操作时返回首页

这种需求手机端和pc端一般是不存在的，因为都是可以手动操作刷新的。

最近在做一个户外社区大屏的项目，因为大屏是全屏显示，没法手动刷新，不可能在页面专门做一个刷新按钮，也不好看，那这样的需求就显得格外重要了。

首先我们来分析一下需求：

　　1.15分钟——需要定时器

　　2.无操作——监控页面上的点击、触摸、滑动等事件

　　3.返回首页——切换路由

我们只需要设置一个定时器，在一进入页面的时候就开始计时，如果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>