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

HUHU_12082023-10-28 14:55

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

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

原代码如下：

html 复制代码

<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>

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

html 复制代码

<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 添加新记录，而是取代了当前的条目

希望可以帮到你~