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.js·okhttp
JNU freshman17 分钟前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥18 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥21 分钟前
Vue2 封装二维码弹窗组件
javascript·vue.js
凉柚ˇ21 分钟前
Vue图片压缩方案
前端·javascript·vue.js
ByteCraze36 分钟前
秋招被问到的常见问题
开发语言·javascript·原型模式
优弧38 分钟前
Vue 和 React 框架对比分析:优缺点与使用场景
vue.js
渣哥1 小时前
从代理到切面:Spring AOP 的本质与应用场景解析
javascript·后端·面试
UIUV1 小时前
JavaScript代理模式实战解析:从对象字面量到情感传递的优雅设计
javascript