Vue嵌套iframe時(shí)$router.go(-1)后退bug的原因解析
Vue嵌套iframe，$router.go(-1)后退bug
問題：
更改iframe中src值后導(dǎo)致的路由跳轉(zhuǎn)混亂，多次更改iframe的src屬性后，調(diào)用router.go(-1)，不能實(shí)現(xiàn)路由后退上一級(jí)
原因：
還是在于通過ifream.src賦值，因?yàn)橛蛳嗤?，還是會(huì)向window.history中插入一條歷史記錄
之前的代碼
<iframe ref="iframe" :src="url" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
<script>
export default {
methods:{
setIframeSrc(){
this.url = '新url'
}
}
}
</script>解決辦法
去掉 :src="url" ，增加 this.$refs.iframe.contentWindow.location.replace
<iframe ref="iframe" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
<script>
export default {
methods:{
setIframeSrc(){
this.url = '新url'
this.$refs.iframe.contentWindow.location.replace(this.url)
}
}
}
</script>參考資料：
擴(kuò)展：vue-router 內(nèi)嵌 iframe，導(dǎo)致this.$router.go(-1)返回上一頁異常
問題描述：
在使用vue-router跳轉(zhuǎn)過來的頁面中內(nèi)嵌了一個(gè)iframe，通過選擇不同項(xiàng)替換iframe的src，但是在使用this.$router.go(-1)返回之前的頁面時(shí)發(fā)現(xiàn)頁面刷新，點(diǎn)擊多次才能返回之前的頁面
原因：
瀏覽器機(jī)制的原因，在 iframe 導(dǎo)航變化后手動(dòng)點(diǎn)擊瀏覽器的后退按鈕也依然只是后退 iframe 中的導(dǎo)航。類似window.history.go
解決方法：
iframe 里面的鏈接用 location.replace 跳轉(zhuǎn)，這樣就只會(huì)有一個(gè)歷史記錄了
<iframe ref="iframe"></iframe> this.$refs.iframe.contentWindow.location.replace(src)
到此這篇關(guān)于Vue嵌套iframe，$router.go(-1)后退bug的文章就介紹到這了,更多相關(guān)vue嵌套iframe內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能
本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié)，從部件的基礎(chǔ)開始，到部件的狀態(tài)管理，并且在過程中實(shí)現(xiàn)一個(gè)類似 Vue 的 v-model 的功能，感興趣的朋友跟隨小編一起看看吧2019-06-06
Nuxt3項(xiàng)目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）,本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認(rèn)）構(gòu)建的vue3項(xiàng)目，element-plus的安裝配置，scss的安裝，目錄結(jié)構(gòu)的創(chuàng)建和解釋，需要的朋友可以參考下2022-12-12
vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果（開箱即用）
這篇文章主要介紹了vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果（開箱即用）,每一個(gè)數(shù)字由七個(gè)元素構(gòu)成，即每一個(gè)segment元素，本文給大家分享實(shí)現(xiàn)實(shí)例，感興趣的朋友一起看看吧2019-12-12
這篇文章主要介紹了Vue中使用keepAlive不緩存問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
vue3原始值響應(yīng)方案及響應(yīng)丟失問題解讀
這篇文章主要介紹了vue3原始值響應(yīng)方案及響應(yīng)丟失問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實(shí)現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程
在業(yè)務(wù)中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue 每次渲染完頁面后div的滾動(dòng)條保持在最底部的方法
下面小編就為大家分享一篇vue 每次渲染完頁面后div的滾動(dòng)條保持在最底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐
這篇文章主要介紹了詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06