Vue刷新页面的三种方式

摘要：vue自带的路由跳转方式，使用过后发现这俩种方式都会使页面有短暂的空白，体验效果不是特别好所以总结出了第三种方式；在app或者路由插槽处声明以下代码在页面中需要页面刷新的地方调用即可

1.原生的js刷新方式：

location.reload();

2.vue自带的路由跳转方式：

this.$router.go(0);

使用过后发现这俩种方式都会使页面有短暂的空白，体验效果不是特别好所以总结出了第三种方式

3. 在app或者路由插槽处声明以下代码：

<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();

原文链接:https://blog.csdn.net/tangyuan0217/article/details/116052003

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10250