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