[vue] 嵌套iframe，$router.go(-1)后退bug

最新推荐文章于 2024-10-24 11:31:17 发布
原创 最新推荐文章于 2024-10-24 11:31:17 发布 · 2.2k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #golang #bug

文章讲述了在更改iframesrc值后，使用$router.go(-1)无法正确回退的问题，解决方法是通过修改iframe的contentWindow.location.replace而不是直接设置src。
该文章已生成可运行项目，

问题：更改iframe中src值后导致的路由跳转混乱，多次更改iframe的src属性后，调用router.go(-1)，不能实现路由后退上一级
原因：还是在于通过ifream.src赋值，因为域相同，还是会向window.history中插入一条历史记录

之前的代码

<iframe ref="iframe" :src="url" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
本文章已经生成可运行项目
最低0.47元/天 解锁文章
vue嵌套iframe问题
会点php的前端小渣渣
11-18 2023
最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目，尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。 router.go()的使用   此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。   详细描述：当多次更改iframe->src属性后，调用router.go(-1)，不能实现路由后退上一级，而是将iframe当作一个窗口文档，调用了该窗口文档的window.history.go(-1)，并未更改父级项目的路由后退功能。   解决办法：
vue3 二级路由-内嵌外链解决方案(iframe)
qq_28805447的博客
10-28 5191
vue3 二级路由-内嵌外链解决方案(iframe)
iframe vue 前进 后退_Vue 实现前进刷新，后退不刷新的效果 vue-router里的meta
weixin_32126033的博客
01-27 351
需求一：在一个列表页中，第一次进入的时候，请求获取数据。点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。解决方案在App.vue设置：1 2 3 假设列表页为list.vue，详情页为detail.vue，这两个都是子组件。我们在keep-alive添加列表页的名字，...
vue项目使用$router.go(-1)返回时刷新原来的界面操作
10-15
主要介绍了vue项目使用$router.go(-1)返回时刷新原来的界面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router 内嵌 iframe，导致this.$router.go(-1)返回上一页异常
南乔几经秋、的博客
09-03 8489
问题描述： 在使用vue-router跳转过来的页面中内嵌了一个iframe，通过选择不同项替换iframe的src，但是在使用this.$router.go(-1)返回之前的页面时发现页面刷新，点击多次才能返回之前的页面 原因： 浏览器机制的原因，在 iframe 导航变化后手动点击浏览器的后退按钮也依然只是后退 iframe 中的导航。类似window.history.go 解决方法：...
页面嵌入iframe 点击浏览器后退问题
SeriousLose
06-21 3825
在iframe绑定load事件，这样子就可以监听到打开 iframe 点击浏览器后退 按钮事件；
React,Vue,Css3 ...等热门面试题
qq_70010470的博客
05-24 997
## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的 一旦组件开始更新 主线程就一直被React控制 这个时候如果再次执行交互操作 就会卡顿 页面首次渲染会创建一颗结构 一模一样的的Fiber节点树 Fiber在update的时候 会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化 在更新结束后会取代之前的 Fiber节点树 渲染过程采用切片的方式
vue面试题+wx-open-launch-app开放标签唤醒app方法
q4717529的博客
10-24 940
事件是文档和浏览器窗口中发生的特定的交互瞬间，事件就发生了。一是直接在标签内直接添加执行语句，二是定义执行函数。addeventlistener 监听事件事件类型分两种：事件捕获、事件冒泡。事件捕获就是：网景公司提出的事件流叫事件捕获流，由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。事件冒泡：IE 提出的事件流叫做事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点。事件流就是，页面接受事件的先后顺序就形成了事件流。
vue打开后端html文件,VUE渲染后端返回含有script标签的html字符串示例
weixin_42181693的博客
06-07 3468
VUE渲染后端返回含有script标签的html字符串示例在接入支付宝支付模块的时候，支支返回的是一个form串，细看一下还有一个script标签，如何将其渲染出来给大家分享一下经验。注意点：不能在当前页面追加任何元素例如原生js：innerHtml、appendChiled等等；Vue原生v-html也不可以因为其只能渲染html标签，script不能够识别。需要重新创建一个空白Vue组件，用r...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 1093
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
vue项目实现前进刷新后退不刷新
07-02
此项目代码包括3种（大同小异的）方式实现页面数据的前进刷新后退不刷新的功能，分别可以参考页面的2、3、4代码的实现，欢迎有问题及时反映
Vue页面内嵌ifream，返回异常问题
xiu52t的博客
02-23 3837
问题描述 业务需求，点击文件列表项，进入内嵌 iframe 的详情页预览pdf，火狐浏览器点击页面按钮或者浏览器返回按钮两次才能退回到列表页。页面按钮返回功能通过$router.go(-1)实现。 问题原因 浏览器机制的原因，在 iframe 导航变化后手动点击浏览器的后退按钮也依然只是后退 iframe 中的导航。 <iframe ref="iframe" :src="pdfUrl"&gt...
iframe vue 前进 后退_vue单页应用前进刷新后退不刷新方案探讨
weixin_30246833的博客
01-17 452
引言前端webapp应用为了追求类似于native模式的细致体验，总是在不断的在向native的体验靠拢；比如本文即将要说到的功能，native由于是多页应用，新页面可以启用一个的新的webview来打开，后退其实是关闭当前webview，其上一个webview就自然显示出来；但是在单页的webapp应用中，所有内容其实是在一个页面中展示的，不存在多页的情况，这时就需要前端开发来想办法实现相应的体...
iframe vue 前进 后退_Vue 页面 前进刷新 后退不刷新（keepAlive）
weixin_33121737的博客
01-17 655
页面分为： A 主页 B列表页 C 详情页A beforeRouteLeave 时设置 to.meta.keepAlive = false (A 进入 B页面时)， 不缓存 B列表页B beforeRouteLeave 时 (B -> C)列表页进详情页时 from.meta.keepAlive =true 缓存B列表页C详情页 返回 B列表页 ，此时B列表页缓存不生效，也就是第一次不...
iframe vue 前进 后退_前端面试准备笔记系列之vue(01)
weixin_39956558的博客
12-19 157
目录01. 对于MVVM的理解?02. 概述Vue以及优缺点？03. vue等单页面应用及其优缺点04. Vue实现数据双向绑定的原理05. vue.js的两个核心是什么？06. css如何只在当前组件起作用07. vue几种常用的指令08. v-on 可以绑定多个方法吗？正文01. 对于MVVM的理解?Model 代表数据模型View 视图，代表UI组件，负责将数据模型通过UI展示出来ViewM...
uni-app左上角退出，嵌套iframe退出异常问题
lianyunpeng的博客
03-29 1208
v-linktag="div"</v-link>uni-app使用 :to 跳转的页面中内嵌了一个iframe，如果iframe页面内进行了点击跳转，用vue-router的返回，是无法回到期望的vue页面。
vue嵌套iframe一系列问题
IsolatedTraver
05-10 8870
vue嵌套iframe一系列问题 最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目，尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。 router.go()的使用   此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。   详细描述：当多次更改iframe->src属性后，调用router.go(-1)，不能实现路由后退上一级，而是将ifr...
iframe影响浏览器返回行为的解决方法
onmywayyoung's blog
12-15 2044
iframe影响浏览器的返回行为，它本不应该参与页面的导航行为。
由iframe引起的无法返回上一页的问题
qq_43851684的博客
09-20 3582
使用的框架: vue页面里面嵌套了 iframe，在设置iframe的src后，不知道为什么使用 router.back() 无法跳转到上一页，必须使用 router.go(-2) 才可以。但问题是有的时候用 router.go(-1) 可以，有的时候却不行。因为iframe里面的内容对于我来说是黑盒，在内部可能进行了重定向操作而我不知道。
this.$router.go(-1) 和 back
最新发布
09-30
在 Vue Router 中，`this.$router.go(-1)` 和 `this.$router.back` 都用于实现页面导航的后退功能，但它们在使用上存在一些细微区别。 ### 功能上的区别 - **`this.$router.go(-1)`**：`this.$router.go` 方法可以在浏览器历史记录中向前或向后移动指定的步数。当传入负数时表示向后移动，传入正数时表示向前移动。例如，`this.$router.go(-1)` 表示后退一步，`this.$router.go(1)` 表示前进一步 [^3]。 - **`this.$router.back`**：`this.$router.back` 方法的功能相对单一，它专门用于后退到上一个页面，等同于 `this.$router.go(-1)`。 ### 使用场景 - **`this.$router.go(-1)`**：适用于需要精确控制历史记录移动步数的场景。比如，用户在一个多步骤的表单填写流程中，可能需要后退多步来修正之前的填写内容，此时可以使用 `this.$router.go(-n)`（n 为需要后退的步数）。 ```vue <template> <button @click="goBackSteps">后退两步</button> </template> <script> export default { methods: { goBackSteps() { this.$router.go(-2); } } } </script> ``` - **`this.$router.back`**：适用于简单的后退场景，即只需要回到上一个页面的情况。例如，在页面的头部添加一个返回按钮，点击该按钮即可返回上一页。 ```vue <template> <button @click="goBack">返回上一页</button> </template> <script> export default { methods: { goBack() { this.$router.back(); } } } </script> ``` ### 总结 从功能上来说，`this.$router.back` 是 `this.$router.go(-1)` 的一种简化写法，二者在后退到上一个页面的功能上是等价的。在实际开发中，可以根据具体的业务需求选择合适的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值