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);
}
},
这样,完美解决了移动端的页⾯刷新问题,也不会出现⽩屏的问题.