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.$(0);
}
},
但是这种情况会出现⼿机端的⽩屏情况,⽽且对应移动端的ios依旧解决不了router.push（传参）跳转页⾯，参数改变，跳转页⾯数据不刷新的解决办法 .
所以，我们需要在定义路由界⾯这样写
app.vue
<keep-alive v-if="$a.keepAlive">
<router-view/>
</keep-alive>
<!--<FooterGuide  />-->
<router-view v-if="!$a.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: {
react router传参数'$route' (to, from) {
this.$(0);
}
},
这样，完美解决了移动端的页⾯刷新问题，也不会出现⽩屏的问题.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。