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 this.$router.push路由跳转,刷新参数消失
this.$router.push({name:"",params:{id:""}})
name和params搭配刷新参数会消失
this.$router.push({path:"",query:{id:""}})
path和query搭配，刷新页面参数不会消失，query中参数成了url中的一部分
以上为个人经验，希望能给大家一个参考，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- vue实现token过期自动跳转到登录页面
- vue 使用vuex在页面跳转的实现方式
- Vue实现关联页面多级跳转（页面下钻）功能的完整实例
- vue 页面跳转的实现方式
- Vue this.$router.push(参数)实现页面跳转操作
- Vue页面跳转传递参数及接收方式
- vue项目实现页面跳转的方法
本文由 华域联盟 原创撰写：华域联盟 » Vue路由this.route.push跳转页面不刷新的解决方案
转载请保留出处和原文链接：https://www.cnhackhy.com/74462.htm
