vantUI(Tabbar标签页)浏览器返回上一页的失效问题

文章讲述了在Vue开发中,使用`van-tabs`组件时,如何通过修改``的`replaceTo`为`to`属性,解决从页面2回退到页面1的问题。作者解释了`replace`和`push`方法对history栈的影响,指出`replace`不添加新的历史记录,导致回退失效。
摘要由CSDN通过智能技术生成

在开发中遇到这样一个问题,由页面1切换到页面2,再点击浏览器的回退,无法回退到页面1。

开始以为是路由配置的有问题,但是子页面可以正常回退,因为replace只是替换路由,而不会往history栈中记录路由,所以当切换到页面2的时候,历史的路由里已经没有页面1了,所以无法回去。

原代码如下:

<van-tabbar route>
  <van-tabbar-item replace  to="/it" icon="todo-list-o">页面1</van-tabbar-item>
  <van-tabbar-item replace  to="/al" icon="bulb-o">页面2</van-tabbar-item>
</van-tabbar>

修改成如下代码即可正常回退。

<van-tabbar route>
  <van-tabbar-item  to="/it" icon="todo-list-o">页面1</van-tabbar-item>
  <van-tabbar-item  to="/al" icon="bulb-o">页面2</van-tabbar-item>
</van-tabbar>

补充知识:

 this.$router.to, this.$router.replace

  • router.push  方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
  • router.replace  在导航时不会向 history 添加新记录,而是取代了当前的条目

希望可以帮到你~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值