Vue路由ute.push跳转页⾯不刷新的解决⽅案
Vue路由ute.push跳转页⾯不刷新
⼀、背景
react router 跳转介绍：在vue项⽬开发中，使⽤路由进⾏页⾯跳转时，路由所跳转的页⾯不进⾏刷新。
也就是vue⽣命周期函数没有执⾏(created、mounted钩⼦函数)。
案例：
A页⾯：
B页⾯：
问题：
当在A页⾯第⼀点击按钮到B页⾯时，⼀切正常，当返回到A页⾯再次点击按钮时，B页⾯没有执⾏mounted钩⼦函数，结果导致mounted函数中查询⽅法不执⾏。⼆、解决⽅法：
1、使⽤activated:{}周期函数代替mounted:{}函数即可。
2、监听路由
// 不推荐、⽤户体验不好
watch: {
'$route' (to, from) {
// 路由发⽣变化页⾯刷新
this.$(0);
}
},
// 该⽅法会多⼀次请求
watch: {
'$route' (to, from) {
// 在mounted函数执⾏的⽅法，放到该处
this.qBankId = globalVariable.questionBankId;
this.qBankName = globalVariable.questionBankTitle;
this.searchCharpter();
}
},
Vue this.$router.push路由跳转，刷新参数消失
this.$router.push({name:"",params:{id:""}})
name和params搭配刷新参数会消失
this.$router.push({path:"",query:{id:""}})
path和query搭配，刷新页⾯参数不会消失，query中参数成了url中的⼀部分
以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。