vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())
vue路由跳轉(zhuǎn)打開新窗口和關(guān)閉窗口
需求:從當(dāng)前頁面跳轉(zhuǎn)到其他頁面時,打開一個新窗口
比如:點擊頁面上的用戶反饋,打開用戶反饋的新頁面,要使用編程式導(dǎo)航
編程式導(dǎo)航
使用路由對象的resolve的方法解析路由,可以得到location、router、href等目標(biāo)路由的信息,只要得到href就可以使用window.open打開新窗口了。
代碼如下:
? ? // 路由跳轉(zhuǎn)新界面 ? ? userFeedback() { ? ? ? // this.$router.push({ path: '/feedback' }); ? ? ? 用push,也能實現(xiàn)跳轉(zhuǎn),但是不能打開新頁面。 ? ? ? const { href } = this.$router.resolve({ ? ? ? ? path: '/feedback' ? ? ? }); ? ? ? window.open(href, '_blank'); ? ? },
如果是復(fù)雜的需要帶參數(shù)跳轉(zhuǎn)的路由,是以下寫法,用query攜帶參數(shù)
? <template slot-scope="scope"> ? ? <el-button ? ? ? size="small" ? ? ? @click.stop="watchDetail(scope.row)">詳情</el-button> ? </template>
?watchDetail(row) { ? ? const { href } = this.$router.resolve({ ? ? ? path: `/answerSituation`, ? ? ? query: { ? ? ? ? id: row.id, ? ? ? ? paperName: this.paperName, ? ? ? ? name: row.name, ? ? ? ? examScore: row.examScore, ? ? ? ? answersTime: row.answersTime ? ? ? } ? ? }); ? ? window.open(href, '_blank'); ? }
window.open( )方法
定義和用法
open() 方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口。
語法
window.open(URL,name,specs,replace)
第一個參數(shù)URL
可選。打開指定的頁面的URL。如果沒有指定URL,打開一個新的空白窗口
第二個參數(shù)name
可選。指定target屬性或窗口的名稱。支持以下值:
_blank
- 在新窗口顯示目標(biāo)網(wǎng)頁。這是默認_self
- 在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁_top
- 框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁(不常用)
第三個參數(shù)
可選參數(shù),設(shè)置窗口參數(shù),各參數(shù)用逗號隔開。
關(guān)閉窗口 window.close()
用法
window.close(); ? //關(guān)閉本窗口 或者 <窗口對象>.close(); ? //關(guān)閉指定的窗口
例子:關(guān)閉新窗口
?var mywin=window.open('http://www.xxx.com'); //將新打的窗口對象,存儲在變量mywin中 ?mywin.close();
vue路由跳轉(zhuǎn)打開新窗口(被瀏覽器攔截)
今天做了一個功能是點擊按鈕路由跳轉(zhuǎn)打開新的窗口頁面
第一種方法
<router-link target="_blank" :to="{path:'/FundManger/FundProductMoney', query:{managerId:fundcode}}></router-link>"
第二種方法
? <a @click="getGetMyPortfolioById(scope.row) ">查看</a> ?getGetMyPortfolioById(vals) {? ? ? getMyPortfolioById({ ? ? }).then(response = >{? ? ? ? ? const routerdata = this.$router.resolve({? ? ? ? ? ? ? ? ? ? name: '組合分析以及組合持倉',? ? ? ? ? ? ? ? ? ? params: { managerId: vals.fundCode }? ? ? ? ? })? ? ? ? ? const newhref = routerdata.href + '?managerId=' + vals.fundCode? ? ? ? ? ?window.open(newhref, '_blank')? ? ? }) ?}?
當(dāng)我們用到第二種方法時候,是觸發(fā)事件請求接口根據(jù)條件去判斷在進行路由跳轉(zhuǎn),這個時候就會遇到瀏覽器被攔截的問題
在接口請求的回調(diào)函數(shù)中 需要使用window.open()打開新頁面,但是等接口請求成功之后,window.open()打開新頁面總是被瀏覽器攔截,原因大概是,放在請求回調(diào)函數(shù)中的操作,被瀏覽器認為不是用戶主動觸發(fā)的事件,并且延遲1000ms ,被認為有可能是廣告,于是被攔截
解決的方法:
在接口請求之前先打開一個空的頁面
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: '組合分析以及組合持倉', ? ? ? ? ??? ? ?? ?params: { ? ? ? ? ? ? ? ??? ??? ?managerId: vals.fundCode ? ? ? ? ??? ??? ?} ? ? ? ?? ??? ? }) ? ? ??? ??? ?const newhref = routerdata.href + '?managerId=' + vals.fundCode ? ? ??? ??? ?tempPage.location = newhref ?? ? ?}) ?}
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue模擬實現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細,感興趣的小伙伴可以動手嘗試一下2022-11-11vue-cli創(chuàng)建項目時由esLint校驗導(dǎo)致報錯或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項目時由esLint校驗導(dǎo)致報錯或警告的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05vue在mounted中window.onresize不生效問題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue使用天地圖、openlayers實現(xiàn)多個底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實現(xiàn)多個底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實現(xiàn)底圖添加,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧2022-04-04vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動實現(xiàn)定位、顏色過渡動畫效果的代碼
這篇文章主要介紹了vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動實現(xiàn)定位、顏色過渡動畫效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08