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

相关推荐
AI_56785 分钟前
Vue3组件通信的实战指南
前端·javascript·vue.js
烤麻辣烫5 分钟前
黑马大事件学习-16 (前端主页面)
前端·css·vue.js·学习
UpgradeLink13 分钟前
Electron项目使用electron-updater与UpgradeLink接入参考
开发语言·前端·javascript·笔记·electron·用户运营
m0_6161884923 分钟前
JS文件批量下载并打包成ZIP的功能
开发语言·javascript·ecmascript
xiaoxue..25 分钟前
React 新手村通关指南:状态、组件与魔法 UI
前端·javascript·react.js·ui
滿40 分钟前
Vue3 ElementPlus el-select 焦点事件数据不回显问题
javascript·vue.js·elementui
代码or搬砖41 分钟前
Vue生命周期总结(四个阶段,八个钩子函数)
前端·javascript·vue.js
VX:Fegn089541 分钟前
计算机毕业设计|基于springboot + vue超市管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
梵尔纳多43 分钟前
第一个 Electron 程序
前端·javascript·electron
鹏北海-RemHusband43 分钟前
记录一次微前端改造:把 10+ 个独立 Vue 项目整合到一起
前端·javascript·vue.js