当前位置: 首页 > article >正文

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

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

希望可以帮到你~


http://www.kler.cn/a/105938.html

相关文章:

  • Vue3中实现插槽使用
  • SQL MID() 函数详解
  • .NET桌面应用架构Demo与实战|WPF+MVVM+EFCore+IOC+DI+Code First+AutoMapper
  • 【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
  • HBase 开发:使用Java操作HBase
  • 基于Python的仓库管理系统设计与实现
  • “数聚瑞安·创新未来”中国·瑞安第四届创新创业大赛圆满举办!
  • 基于springboot实现校友社交平台管理系统项目【项目源码+论文说明】
  • 【无标题】读书笔记之《智能化社会:未来人们如何生活、相爱和思考》
  • 檢測項目簡體字
  • 【2023CANN训练营第二季】——通过一份入门级算子开发代码了解Ascend C算子开发流程
  • vue3项目报错The template root requires exactly one element.eslint-plugin-vue
  • Redis入门
  • 若依微服务上传图片文件代理配置
  • 找游戏外包开发游戏,有哪些好处呢?
  • 图纸管理制度《四》
  • linux音频-IIS音频接口
  • TimeGPT:时间序列预测的第一个基础模型
  • VSCode:清理ipch缓存
  • vue+Fullcalendar
  • 三、虚拟机的迁移和删除
  • python自动化测试平台开发:自动化测试平台简介
  • 一、高效构建Java应用:Maven入门和进阶
  • GBase8a SSL 配置
  • 【Python机器学习】零基础掌握GradientBoostingClassifier集成学习
  • Go 命令大全:全面解析与实践