Vue用router.push（傳參）跳轉頁面，參數改變，跳轉頁面數據不刷新的解決辦法

vue-router同路由$router.push不跳轉一個簡單解決方案

vue-router跳轉通常是這麼寫：

goPage(ParentDeptCode2,DeptCode2,hosName,hosId){
  this.$router.push({
    path:'/ChoiceTime',
    query:{
      DeptCode:ParentDeptCode2,
      DeptCode2:DeptCode2,
      hosName:hosName,
      hosId:hosId
    }
  })
}

可是當遇到，須要跳轉同頁面不一樣query的狀況，上面的方法不起做用。基本頁面全部組件都須要刷新,咱們只要跳轉加載,

$route 做爲vue實例的一個響應式屬性，和在data中寫的屬性本質上是同樣的，均可以經過this的方式拿到。既然你能夠監聽data中的屬性變化，一樣也能夠監聽 $route 的變化。watch中監聽的對象默認回調函數中的參數值就是newVal,oldVal。做爲 $route 屬性來講固然也就是 to 和 from 的概念了。

watch: {
    '$route' (to, from) {
        this.$router.go(0);
    }
},

可是這種狀況會出現手機端的白屏狀況,並且對應移動端的ios依舊解決不了router.push（傳參）跳轉頁面，參數改變，跳轉頁面數據不刷新的解決辦法 .

因此,咱們須要在定義路由界面這樣寫

app.vue

<keep-alive v-if="$route.meta.keepAlive">
  <router-view/>
</keep-alive>
  <!--<FooterGuide  />-->
<router-view v-if="!$route.meta.keepAlive">
  <!-- 這裏是不被緩存的視圖組件，好比 page3 -->
</router-view>

router/index.js
{
            name:'ChoiceTime',
            path:'/ChoiceTime/:DeptCode/:DeptCode2/:hosName/:hosId',
            component: ChoiceTime,
            meta: {
                title: '選擇時間',
                keepAlive: false,
            },
 },  

路由將跳轉到ChoiceTime.vue頁面

goPage(ParentDeptCode2,DeptCode2,hosName,hosId){
  this.$router.push({
    name:'ChoiceTime',
    params:{
      DeptCode:ParentDeptCode2,
      DeptCode2:DeptCode2,
      hosName:hosName,
      hosId:hosId
    }
  })
}

watch: {
  '$route' (to, from) {
    this.$router.go(0);
  }
},

這樣,完美解決了移動端的頁面刷新問題,也不會出現白屏的問題.