vue刷新当前页面方法(转载)

页面刷新方法

解决方案以及出现的问题

• 1.this.$router.go(0). 通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.

• 2.location.reload(). 该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。 缺点:该方法在跨域调用（执行该方法的脚本文件的域和 Location 对象所在页面的跨不同）时，将会抛出 DOMException 异常。并且也同样会出现页面在刷新的时候会出现白屏的现象

• 3.provide / inject组合
  原理: 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
  提示: provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

所以接下来我们将介绍第三种方法 provide / inject组合

provide / inject组合

在APP.vue中,声明reload方法,控制router-view模块的显示或者隐藏,从而控制页面的再次加载.

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

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

在需要刷新的页面,直接注入inject的reload依赖,在逻辑操作完成后需要刷新的位置,使用this.reload()调用,即可刷新当前页面.

export default {
  name: "ItemPage",
  components: {},
  inject: ["reload"], //注入reload方法
  data() {
    return {
    };
  },
  methods: {
    //页面逻辑操作方法
    handleClick() {
      //此处操作页面功能
      //.......

      this.reload(); //此处刷新页面
    }
  },
  mounted() {
  }
};

最后

十分感谢原博主,原博客的地址为:

• 请问vue组件如何reload或者说vue-router如何刷新当前的route？
• vue | 刷新当前页面

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/articles/14459801.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！