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)路由后退上一級
原因：
還是在于通過ifream.src賦值，因?yàn)橛蛳嗤€是會向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)航變化后手動點(diǎn)擊瀏覽器的后退按鈕也依然只是后退 iframe 中的導(dǎo)航。類似window.history.go
解決方法：
iframe 里面的鏈接用 location.replace 跳轉(zhuǎn)，這樣就只會有一個(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
Vapor Mode是Vue 3.6推出的一個(gè)新的高效渲染模式,它實(shí)現(xiàn)了無虛擬DOM并大幅度提升性能, 下面就來詳細(xì)的介紹一下使用Vapor Mode的方法小結(jié),感興趣的可以了解一下2026-05-05
Vue進(jìn)階之利用transition標(biāo)簽實(shí)現(xiàn)頁面跳轉(zhuǎn)動畫
這篇文章主要為大家詳細(xì)介紹了Vue如何利用transition標(biāo)簽實(shí)現(xiàn)頁面跳轉(zhuǎn)動畫，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起一下2023-08-08
Vue 動態(tài)添加表單實(shí)現(xiàn)動態(tài)雙向綁定
動態(tài)表單是一個(gè)常見的需求,本文詳細(xì)介紹了Vue.js中實(shí)現(xiàn)動態(tài)表單的創(chuàng)建,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
這篇文章主要介紹了Vue入門之a(chǎn)nimate過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue的編碼技巧與規(guī)范使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
路由守衛(wèi)（Route?Guards）是?Vue?Router?的一個(gè)功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應(yīng)用,需要的可以了解下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue穿梭框?qū)崿F(xiàn)上下移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Vue Router之router.push和router.resolve頁面跳轉(zhuǎn)方式
這篇文章主要介紹了Vue Router之router.push和router.resolve頁面跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04