Vue路由this.route.push跳转页面不刷新

                     Vue路由this.route.push跳转页面不刷新

一、背景

介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。

案例:

A页面:

B页面:

问题:

当在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.js中created()与activated()的个人使用理解:

https://blog.csdn.net/qq_36608921/article/details/82216617

this.$router.go()和this.$router.push()的差别:

https://blog.csdn.net/qq_36838191/article/details/80855120

vue-router3.0版本中 router.push 不能刷新页面的问题:

https://www.jb51.net/article/139835.htm

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值