Vue路由this.route.push跳转页面不刷新的解决方案

Vue路由this.route.push跳转页面不刷新 一、背景
介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。
也就是vue生命周期函数没有执行(created、mounted钩子函数)。
案例:
A页面:
Vue路由this.route.push跳转页面不刷新的解决方案
文章图片

B页面:
Vue路由this.route.push跳转页面不刷新的解决方案
文章图片

问题:
当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行。
二、解决方法:
1、使用activated:{}周期函数代替mounted:{}函数即可。
2、监听路由

// 不推荐、用户体验不好watch: { '$route' (to, from) {// 路由发生变化页面刷新 this.$router.go(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中的一部分
【Vue路由this.route.push跳转页面不刷新的解决方案】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    推荐阅读