您的位置：首页 > 编程学习 > > 正文

vue路由跳转自动定位在哪里（Vue路由this.route.push跳转页面不刷新的解决方案）

更多时间：2021-10-11 00:49:19 类别：编程学习浏览量：460

vue路由跳转自动定位在哪里

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

一、背景

介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。

也就是vue生命周期函数没有执行(created、mounted钩子函数)。

案例：

A页面：

vue路由跳转自动定位在哪里（Vue路由this.route.push跳转页面不刷新的解决方案）

B页面：

vue路由跳转自动定位在哪里（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 跳转页面不刷新

上一篇：mysql中自增字段类型（MySQL数字类型自增的坑）

下一篇：python发送微信消息脚本（python实现给微信指定好友定时发送消息）

您可能感兴趣

vue路由跳转自动定位在哪里（Vue路由this.route.push跳转页面不刷新的解决方案）