Vue项目点击刷新页面的三种方式

Vue项目点击刷新页面的三种方式

一、原生js刷新方式：

location.reload();

二、Vue框架自带的路由跳转方式：

this.$router.go(0);

三、在App.vue页面声明以下代码：

<template>
  <div id="app">
    <router-view v-if="isShow"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    // 父组件中通过provide来提供变量，在子组件中通过inject接受
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    reload() {
      // reload方法首先将isShow设置为false，将router-view通过if判断取消
      this.isShow = false
      // Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。
      this.$nextTick(function() {
        // 在页面更新后再将isShow设置为true
        this.isShow = true
      })
    }
  }
}
</script>

在组件中设置刷新：

export default {
    inject:['reload'],//  此处引入在app中定义的reload方法
    data () {
        return {
        }
    }
},

在页面中需要刷新的地方调用：

this.reload();

总结： 前两种方式虽然也可以刷新，但是点击按钮刷新的时候，页面会有短暂的空白，体验效果不是很好，所以推荐第三种方法供大家参考