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

相关推荐
济617几秒前
linux 系统移植(第六期)--Uboot移植(5)--bootcmd 和 bootargs 环境变量-- Ubuntu20.04
java·前端·javascript
FFF-X4 分钟前
UniApp 小程序实现自定义每张图片播放时长的轮播图(基于 uView 的 u-swiper)
小程序·uni-app
lili-felicity15 分钟前
React Native for OpenHarmony 实战:Easing 动画完全指南
javascript·react native·react.js
持续前行30 分钟前
vscode 中找settings.json 配置
前端·javascript·vue.js
JosieBook38 分钟前
【Vue】11 Vue技术——Vue 中的事件处理详解
前端·javascript·vue.js
韩曙亮39 分钟前
【jQuery】jQuery 简介 ( JavaScript 库简介 | jQuery 核心概念、特点 | jQuery 下载并使用 )
前端·javascript·jquery
安逸点41 分钟前
Vue项目中使用xlsx库解析Excel文件
vue.js
一只小阿乐1 小时前
vue 改变查询参数的值
前端·javascript·vue.js·路由·router·网文·未花中文网
2501_948122631 小时前
React Native for OpenHarmony 实战:Steam 资讯 App 服务条款实现
javascript·react native·react.js·游戏·ecmascript·harmonyos
奚大野...1 小时前
uni-app手机端项目touchmove禁止页面上下拉滑动
前端·javascript·uni-app