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里面也有退出,以上方法将失效。

相关推荐
掘金安东尼4 小时前
让 JavaScript 更容易「善后」的新能力
前端·javascript·面试
掘金安东尼4 小时前
用 HTMX 为 React Data Grid 加速实时更新
前端·javascript·面试
灵感__idea6 小时前
Hello 算法:众里寻她千“百度”
前端·javascript·算法
袋鼠云数栈UED团队7 小时前
基于 Lexical 实现变量输入编辑器
前端·javascript·架构
亦妤7 小时前
JS执行机制、作用域及作用域链
javascript
SuperEugene9 小时前
表单最佳实践:从 v-model 到自定义表单组件(含校验)
前端·javascript·vue.js
不会敲代码19 小时前
React性能优化:深入理解useMemo和useCallback
前端·javascript·react.js
Mintopia10 小时前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
YukiMori2311 小时前
一个有趣的原型继承实验:为什么“男人也会生孩子”?从对象赋值到构造函数继承的完整推演
前端·javascript
Mintopia11 小时前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app