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

相关推荐
Jenlybein1 小时前
快速了解熟悉 Vite ,即刻上手使用
前端·javascript·vite
Ailrid1 小时前
@virid/core:用游戏引擎的思维来写应用-高度确定性的应用开发引擎
javascript
SuperEugene3 小时前
Vue3 组件复用设计:Props / 插槽 / 组合式函数,三种复用方式选型|组件化设计基础篇
前端·javascript·vue.js
nFBD29OFC4 小时前
利用Vue元素指令自动合并tailwind类名
前端·javascript·vue.js
i220818 Faiz Ul5 小时前
动漫商城|基于springboot + vue动漫商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·动漫商城系统
zk_one6 小时前
【无标题】
开发语言·前端·javascript
AIBox3657 小时前
openclaw api 配置排查与接入指南:网关启动、配置文件和模型接入全流程
javascript·人工智能·gpt
precious。。。7 小时前
1.2.1 三角不等式演示
前端·javascript·html
阿珊和她的猫7 小时前
TypeScript 中的 `extends` 条件类型:定义与应用
javascript·typescript·状态模式
众创岛7 小时前
iframe的属性获取
开发语言·javascript·ecmascript