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

相关推荐
星离~3 小时前
Vue响应式原理详解:从零实现一个迷你Vue
前端·javascript·vue.js
2501_916008894 小时前
手机抓包app大全:无需root的安卓抓包软件列表
android·ios·智能手机·小程序·uni-app·iphone·webview
一只小阿乐4 小时前
react 中的判断显示
前端·javascript·vue.js·react.js·react
小沐°4 小时前
React-页码组件
前端·javascript·react.js
消失的旧时光-19434 小时前
Flutter 与 React/Vue 为什么思想一致?——声明式 UI 体系的深度对比(超清晰版)
vue.js·flutter·react.js
零一科技4 小时前
Vue3学习第三课: ref 与 reactive 选择指南
前端·vue.js
诸葛亮的芭蕉扇6 小时前
抓图巡检-底图支持绘制
开发语言·前端·javascript
熊猫比分站7 小时前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot
一 乐8 小时前
健康打卡|健康管理|基于java+vue+的学生健康打卡系统设计与实现(源码+数据库+文档)
android·java·数据库·vue.js·spring boot·微信小程序