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

最新推荐文章于 2025-08-31 00:32:52 发布

原创最新推荐文章于 2025-08-31 00:32:52 发布 · 2.1w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#vue路由

vue 专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了Vue项目中使用路由进行页面跳转时遇到的刷新问题，详细讲解了为什么首次跳转正常而后续跳转不刷新的原因，并提供了两种有效的解决方案，包括利用activated周期函数和监听路由变化。

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.youkuaiyun.com/qq_36608921/article/details/82216617

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

https://blog.youkuaiyun.com/qq_36838191/article/details/80855120

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

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