vue?路由跳轉(zhuǎn)打開新窗口被瀏覽器攔截問題處理
觸發(fā)事件請(qǐng)求接口根據(jù)條件去判斷在進(jìn)行路由跳轉(zhuǎn):
? <a @click="getGetMyPortfolioById(scope.row) ">查看</a> ? ?getGetMyPortfolioById(vals) {? ? ? getMyPortfolioById({ ? ? ? }).then(response = >{? ? ? ? ? const routerdata = this.$router.resolve({? ? ? ? ? ? ? ? ? ? name: '組合分析以及組合持倉(cāng)',? ? ? ? ? ? ? ? ? ? params: { managerId: vals.fundCode }? ? ? ? ? })? ? ? ? ? const newhref = routerdata.href + '?managerId=' + vals.fundCode? ? ? ? ? ?window.open(newhref, '_blank')? ? ? }) ?}?
當(dāng)我們用以上方法時(shí)候,是觸發(fā)事件請(qǐng)求接口根據(jù)條件去判斷在進(jìn)行路由跳轉(zhuǎn),這個(gè)時(shí)候就會(huì)遇到瀏覽器被攔截的問題
在接口請(qǐng)求的回調(diào)函數(shù)中 需要使用window.open()
打開新頁(yè)面,但是等接口請(qǐng)求成功之后,window.open()打開新頁(yè)面總是被瀏覽器攔截,原因大概是,放在請(qǐng)求回調(diào)函數(shù)中的操作,被瀏覽器認(rèn)為不是用戶主動(dòng)觸發(fā)的事件,并且延遲1000ms
,被認(rèn)為有可能是廣告,于是被攔截
解決的方法:
在接口請(qǐng)求之前先打開一個(gè)空的頁(yè)面:
let tempPage=window.open('' ", _blank');
然后在回調(diào)函數(shù)中:
tempPage.location=url;
(改良版)
? <a @click="getGetMyPortfolioById(scope.row) ">查看</a> ? ? getGetMyPortfolioById(vals) { ? ? ? const tempPage = window.open('', '_blank') ?? ? ?getMyPortfolioById({}).then(response = >{ ?? ??? ??? ? const routerdata = this.$router.resolve({ ? ? ? ? ?? ? name: '組合分析以及組合持倉(cāng)', ? ? ? ? ??? ? ?? ?params: { ? ? ? ? ? ? ? ??? ??? ?managerId: vals.fundCode ? ? ? ? ??? ??? ?} ? ? ? ?? ??? ? }) ? ? ??? ??? ?const newhref = routerdata.href + '?managerId=' + vals.fundCode ? ? ??? ??? ?tempPage.location = newhref ?? ? ?}) ?}
到此這篇關(guān)于vue 路由跳轉(zhuǎn)打開新窗口被瀏覽器攔截問題處理的文章就介紹到這了,更多相關(guān)vue 路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法
這篇文章主要介紹了vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法,文中通過一段示例代碼給大家介紹了vue實(shí)現(xiàn)動(dòng)態(tài)頭部的方法,需要的朋友可以參考下2018-11-11vue3.0實(shí)踐之寫tsx語(yǔ)法實(shí)例
很久不寫博客了,最近在使用ts和tsx開發(fā)vue類項(xiàng)目,網(wǎng)上資料比較少,順便記錄一下方便同樣開發(fā)的人互相學(xué)習(xí)共同進(jìn)步,下面這篇文章主要給大家介紹了關(guān)于vue3.0實(shí)踐之寫tsx語(yǔ)法的相關(guān)資料,需要的朋友可以參考下2022-07-07Vue中對(duì)比scoped css和css module的區(qū)別
這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對(duì)比,scoped css可以直接在能跑起來的vue項(xiàng)目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文2018-05-05vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問題
這篇文章主要介紹了vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue3.0中ref與reactive的區(qū)別及使用場(chǎng)景分析
ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下2023-08-08Vue3-KeepAlive,多個(gè)頁(yè)面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive,多個(gè)頁(yè)面使用keepalive方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端城市三級(jí)聯(lián)動(dòng)組件的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實(shí)例
這篇文章主要介紹了vue將data恢復(fù)到初始狀態(tài) && 重新渲染組件實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vue+Openlayer使用modify修改要素的完整代碼
這篇文章主要介紹了Vue+Openlayer使用modify修改要素的完整代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09