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

相关推荐
星空椰7 分钟前
JavaScript基础:运算符和流程控制
开发语言·javascript·ecmascript
禅思院20 分钟前
使用 VueUse 构建一个支持暂停/重置的 CountUp 组件
前端·vue.js·架构
窝子面37 分钟前
NestJs+MongoDB+Deepseek+Langchain实现ai聊天助手
javascript·数据库·人工智能·mongodb
吴声子夜歌1 小时前
ES6——Calss详解
javascript·es6·原型模式
❆VE❆1 小时前
虚拟列表原理与实战运用场景详解
前端·javascript·css·vue.js·html·虚拟列表
灵感__idea8 小时前
Hello 算法:贪心的世界
前端·javascript·算法
河北清兮网络科技11 小时前
短剧 APP 产品说明
小程序·uni-app·短剧
killerbasd11 小时前
牧苏苏传 我不装了 4/7
前端·javascript·vue.js
橘子编程12 小时前
JavaScript与TypeScript终极指南
javascript·ubuntu·typescript
叫我一声阿雷吧13 小时前
JS 入门通关手册(45):浏览器渲染原理与重绘重排(性能优化核心,面试必考
javascript·前端面试·前端性能优化·浏览器渲染·浏览器渲染原理,重排重绘·reflow·repaint