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

在开发中遇到这样一个问题,由页面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 添加新记录,而是取代了当前的条目

希望可以帮到你~

相关推荐
半生过往4 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听4 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle4 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎4 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特4 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle4 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落4 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金611274 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户47949283569154 小时前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全
摸着石头过河的石头4 小时前
深入理解JavaScript事件流:从DOM0到DOM3的演进之路
前端·javascript·性能优化