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

相关推荐
进击的尘埃10 小时前
Vue 3 编译器宏的编译时魔法:defineModel、defineSlots 与 AST 转换的真相
javascript
不会敲代码110 小时前
使用 Mock.js 模拟 API 数据,实现前后端并行开发
前端·javascript
向上的车轮10 小时前
TypeScript 一日速通指南:数据类型全解析与转换指南
javascript·typescript
青山Coding10 小时前
Cesium应用(四):全球台风气象可视化实现
前端·vue.js·cesium
叫我一声阿雷吧10 小时前
【JS 实战案例】用 JS 实现页面滚动到指定位置(带动画)
javascript·页面交互·js实战案例·平滑滚动·前端零基础·锚点导航
We་ct10 小时前
React 更新触发原理详解
开发语言·前端·javascript·react.js·面试·前端框架·react
还是大剑师兰特10 小时前
Vue3 页面权限控制实战示例(路由守卫 + 权限判断)
开发语言·前端·javascript
跟着珅聪学java11 小时前
Vue 2 + CommonJS 写法开发教程
前端·javascript·vue.js
qq_2461000511 小时前
CSDN risk probe 1773588273
开发语言·javascript·ecmascript