uni-app左上角退出,嵌套iframe退出异常问题

1. 问题分析

复制代码
<v-link
  tag="div"
  v-if="symbol"
  :to="{ path: '/pages/exchange/index', query: { code: symbol} }"
>
</v-link>

uni-app使用 :to 跳转的页面中内嵌了一个iframe,如果iframe页面内进行了点击跳转,用vue-router的返回,是无法回到期望的vue页面。

2. 原因分析

执行vue-router的返回,回退的只是iframe导航,如果iframe里面点击了多次,使url发生变更,那么用户要点击很多次才能真正的返回。

3.解决方案

定义参数:

复制代码
rlen: history.length,// history.length:浏览器历史列表中的元素数量

定义方法

复制代码
backTo() {
  //-1是不进入iframe页面的下级页面直接退出的话,执 行后退一步的操作
  let len = this.rlen - history.length - 1;
  this.$router.go(len);
}

调用

复制代码
<view @click="backTo">
  <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
</view>

注意:如果iframe里面也有退出,以上方法将失效。

相关推荐
十里-1 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
左耳咚1 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu1 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
星光一影1 小时前
供应链进销存源码uniapp全开源ERP多仓库管理系统pc+app手机端
mysql·elementui·uni-app·开源·php·phpstorm·1024程序员节
黑云压城After2 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
A腿长一米二2 小时前
【uniapp问题还是我的认知问题】
uni-app
千里码aicood2 小时前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
用户47949283569153 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在3 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好14 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js