当前位置:编程学习 > > 正文

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

时间:2021-10-11 00:49:19类别:编程学习

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中的一部分

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持开心学习网。

    上一篇下一篇

    猜您喜欢

    热门推荐