在我們修改過頁面的某些資料後，通過想要把頁面重新整理一下，看看修改後的結果。由於vue的存在，頁面是不會自動重新整理的，需要我們手動進行操作。在vue裡有三種重新整理方法，最推薦的就是組合控制法，另外另種方法也會分享給大家學習，下面我們一起來看看vue如何重新整理頁面吧。

1.強制重新整理

window.location.reload()

原生 js 提供的方法；

this.$router.go(0)，vue 路由裡面的一種方法；

這兩種方法都可以達到頁面重新整理的目的，簡單粗暴，但是使用者體驗不好，相當於按 F5 重新整理頁面，頁面的重新載入，會有短暫的白屏。

2.偽造重新整理

通過路由跳轉的方法重新整理，具體思路是點選按鈕跳轉一個空白頁，然後再馬上跳回來

// index.vue 首頁
this.$router.replace('/empty')
// empty.vue 空白頁
created() {
  this.$router.replace('/')
}

3.使用provide / inject組合控制的顯示

vue官方說明中允許一個祖先元件通過設定provide/inject向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。provide/inject 是解決元件之間的通訊問題的利器，不受層級結構的限制。

在專案中修改app.vue檔案：

<template>
 <div id="app">
  <router-view v-if="isRouterAlive"/>
 </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>

注入依賴：

export default {
 inject:['reload'],//注入依賴
 name: "CompanyConfigure",data() {
  return {... ...

呼叫：

this.reload();

到此這篇關於vue.js重新整理當前頁面的例項講解的文章就介紹到這了,更多相關vue.js重新整理當前頁面內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！