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);
  }
},

这样,完美解决了移动端的页面刷新问题,也不会出现白屏的问题.