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

相关推荐
爱编码的傅同学20 分钟前
【单例模式】深入理解懒汉与饿汉模式
java·javascript·单例模式
用户68026590511927 分钟前
2026年企业级网络监控选型指南
javascript·后端·面试
WX-bisheyuange1 小时前
基于Spring Boot的社团管理系统的设计与实现
前端·javascript·vue.js·毕业设计
橙某人1 小时前
LogicFlow 插件魔改实录:手把手教你重写动态分组(DynamicGroup)🛠️
前端·javascript·vue.js
Irene19911 小时前
Vue 3 中编写单文件组件(SFC)的编译时语法糖:<script setup>
vue.js
2501_944446001 小时前
Flutter&OpenHarmony状态管理方案详解
开发语言·javascript·flutter
T_Donna1 小时前
【问题解决】react native: cli.init is not a function
javascript·react native·react.js
qx092 小时前
html中使用vue3+elementplus
javascript·vue.js·html
bjzhang752 小时前
使用 HTML + JavaScript 实现滑动验证码
前端·javascript·html
不老刘2 小时前
前端面试八股文:JavaScript 原型链
javascript·原型链