Vue路由this.route.push跳转页面不刷新问题怎么解决

这篇“Vue路由this.route.push跳转页面不刷新问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue路由this.route.push跳转页面不刷新问题怎么解决”文章吧。

十余年的徽州网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整徽州建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“徽州网站设计”,“徽州网站推广”以来,每个客户项目都认真落实执行。

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跳转页面不刷新问题怎么解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


分享名称:Vue路由this.route.push跳转页面不刷新问题怎么解决
文章来源:http://scyanting.com/article/isggoh.html