vue 无感刷新

一、this.$router.go(0)

路由刷新,相当于F5刷新页面会有白屏闪动

二、window.reload()

原生刷新

三、provice和inject结合的方法,不会有闪烁的空白出现。

APP.vue页面添加下面代码

<template>
  <div class="bg">
    <div>
      <!-- id="app"
      class="app"
      v-bind:style="{
        height: dh + 'px',
        width: dw + 'px',
        maxWidth: dw + 'px',
      }" -->
      <PromptBox />
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>
export default {
  name: "App",
  data() {
    return {
      isRouterAlive:true
    };
  },

  components: {
    PromptBox,
  },
  provide(){
    return{
      reload:this.reload
    }
  methods: {
    reload(){
      this.isRouterAlive = false
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  },
  },

需要刷新的页面使用

export default {
name:'',
inject:['reload'],
methods: {
// 确认跳转聊天室
    affirmSkipRoom(){
      this.$router.replace({
              path: "/someSingingHall",
              query: {
                roomId:  this.adverseData.id,
                liveStreamId: this.adverseData.liveStreamingId,
              },
      });
      this.reload()
    },
}
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容