Vue頁面數據刷新處理（路由$route監聽+Vuex處理）

需求如下：如下問卷調查中，每做完一個問卷，相應的新任務數量（紅色label）跟個人任務列表都需要少一條數據，假設下面截圖一爲頁面1，截圖2爲頁面2，頁面2爲頁面1的子路由，如:{path:'/page1',component:PageOne,children:[{path:'page2',component:PageTwo}]},當由children路由/page1/page2跳回page1時，當用this.$router.push跳轉回父級路由時候，會發現數據並沒有刷新，因爲數據初始化頁面在mounted或者beforeMount實現，父組件並不會重新執行該事件

解決：一開始通過window.location.reload（）進行刷新處理，但是發現在電腦模擬手機能刷新，在自己的p20PRO華爲手機卻刷新不了，網上看到其他方法，但是個人從一開始想到的方法是通過watch監聽，因此有了以下的解決方法，最終實現通過監聽路由$route和控制變量值實現更新

一、存儲變量

Vuex  store.js(以下代碼中，changeHome監聽第一頁即首頁pageOne是否需要刷新，changeTest則是監聽第二頁pageTwo列表頁是否需要刷新)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  changeTest:0,//頁面是否需要刷新
  changeHome:0//刷新首頁
}

const mutations = {
  getChange(state,val){
    state.changeTest = val;
  },
  changeHome(state,val){
    state.changeHome =val;
  }
}

// 創建 store 實例
export default new Vuex.Store({
	state,
    mutations
})

二、pageOne.vue（當子頁面返回要進入pageOne時候，路由watch會進行監聽，先拿取store中changeHome的值，若已經被子路由設爲了1，則重新加載數據）；

(path:'/page1')
<template>
   <div>
    <div>this is pageOne</div>
    <button @click="jump()">點擊進入子頁面pageTwo</button>
     <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
   </div>
</template>
<script>
export default(){
    data(){
        return{}
    },
    watch(){
        $route(){
            //通過路由監聽到vuex中存儲的變量值,當值爲1時候刷新，爲默認值0時候不刷新
             let gettype = this.$store.state.changeHome;
               gettype==1?this.getData():return;
        }
    },
    methods(){
    getData(){//從接口拿取數據},
    jump(){
       //此處可設置爲0，表示第一次進入，當沒有做問卷返回時候並不需要再加載一次
     this.$store.commit("changeHome",0);
     }
    },
    mounted(){
    this.getData();
    //執行過一次通過子路由返回不在執行
    }
}
</script>

三、pageTwo.vue（子路由中將changeHome的值設置爲1，告訴父級pageOne是從子路由返回回來的，父組件pageOne要重新初始化數據）；

(path:'/page1/page2')
<template>
   <div class="p-contain">
     <div>this is pageTwo</div>
    <button type="button" @click="jump()">我要設置父級的changeHome爲1</button>   
   </div>
</template>
<script>
export default(){
    data(){
        return{}
    },
 
    methods(){
       jump(){
         //更改store中changeHome值爲1，再跳轉會父組件pageOne.vue
           this.$store.commit("changeHome",1); this.$router.push({path:"/page1"})
       }
    },
    mounted(){
    
    }
}
</script>

自己寫的demo在page1跟page2都有一個按鈕進行模擬更改store中的值，實際中可以通過點擊進入頁面的入口進行對應的處理~不得不說監聽$route用處很大，可以用來實現如麪包屑等功能，通過這一例子也漲漲見識,Hope it can help you~