vue项目使用$router.go(-1)返回时刷新原来的界面

在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,。。。。。

问题如下:

界面1 :

界面2使用$router.go(-1)返回上一次的界面

由于使用$router.go(-1)返回,导致之前的数据都保留,并未刷新原来的界面,如下:还是显示跳转前的弹框

解决方法1:

不要使用$router.go(-1),而是使用$router.push('某某某'),但是其实这种方法是不合理的,因为你可能跳转的页面是很多页面都可能跳转的,所以如果直接使用$router.push('某某某'),虽然可以解决当前跳转不刷新的问题,但是会导致点击其他页面跳转到页面2,点击使用$router.push('某某某'),所谓的返回按钮,是永远跳转到界面1,不符合现实需求,所以,不推荐使用该方法 

解决方法2:
在界面1的watch中,对router进行监控,当router发生变化时,初始化界面;
根据本项目进行案例演示:

代码如下:

界面一弹出框,使用的是使用pop来控制,显示的时候是pop = true,不显示的是pop = false

之所以使用$router.go(-1)时弹框未关闭是因为pop还是true,所以使用如下方法解决,当router变化的时候初始化数据pop

综上所述:

解决方法:

  watch: {
    '$route' () {
      // 此处写router变化时,想要初始化或者是执行的方法......
    }
  },

 

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue中,使用this.$router.go(-1)可以返回上一个页面。如果你希望在返回上一个页面的同携带参数,可以使用eventBus或者Bus来实现。首先,在公共的bus文件(比如bus.js)中导入Vue,并创建一个实例对象。然后在当前页面中,使用Bus.$emit或eventBus.$emit来触发事件,并传递参数。在上一个页面中,监听这个事件,并在事件回调函数中获取到传递的参数。最后,使用this.$router.go(-1)返回上一个页面。这样就可以实现带参数返回上一个页面的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue-router使用go(-1)方式进行跳转,如何传参](https://blog.csdn.net/Caroline_Yang/article/details/104684898)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue this.$router.go(-1);返回怎么带参数](https://blog.csdn.net/sky_sunshine_x/article/details/105482714)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值