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 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小沐°7 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
Irene19917 小时前
Vue3 <Suspense> 使用指南与注意事项
vue.js·suspense
qq_419854058 小时前
CSS动效
前端·javascript·css
南村群童欺我老无力.8 小时前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
花哥码天下8 小时前
恢复网站console.log的脚本
前端·javascript·vue.js
北辰alk9 小时前
Vue 的 nextTick:破解异步更新的玄机
vue.js
北辰alk9 小时前
Vue 技巧揭秘:一个事件触发多个方法,你竟然还不知道?
vue.js
北辰alk9 小时前
Vue 中 computed 和 watch 的深度解析:别再用错了!
vue.js
奔跑的呱呱牛9 小时前
geojson-to-wkt 坐标格式转换
javascript·arcgis