vue 项目页面刷新router-view控制


vue项目开发过程中,需要在页面提交表单信息之后清空还原,即恢复页面初始状态,第一想法就是对当前页面刷新,重新加载。

想起location.reload()方式和this.$router.go(0)方式跳转,但两种方式都会出现明显的闪屏(即页面出现明显空白时间),因此研究一番之后采用router-view控制方式:

一、设置App.vue文件:

  通过true和false值控制页面路由部分的显隐,

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

  <script>

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

 

 

二、在需要刷新的页面引入reload方法:
  在js代码中,通过inject引入,在需要进行刷新的时候直接this.reload()调用即可。
  

 

 router-view控制的方式体验效果比较好,页面刷新时没有明显的白屏。

end

 

 

 

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM