快捷導(dǎo)航

vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())

更新時(shí)間：2023年04月13日 15:37:32 作者：小太陽...

這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue路由跳轉(zhuǎn)打開新窗口和關(guān)閉窗口

需求：從當(dāng)前頁面跳轉(zhuǎn)到其他頁面時(shí)，打開一個(gè)新窗口

比如：點(diǎn)擊頁面上的用戶反饋，打開用戶反饋的新頁面，要使用編程式導(dǎo)航

編程式導(dǎo)航

使用路由對(duì)象的resolve的方法解析路由，可以得到location、router、href等目標(biāo)路由的信息，只要得到href就可以使用window.open打開新窗口了。

代碼如下：

? ? // 路由跳轉(zhuǎn)新界面
? ? userFeedback() {
? ? ? // this.$router.push({ path: '/feedback' });
? ? ? 用push,也能實(shí)現(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() 方法用于打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。

語法

window.open(URL,name,specs,replace)

第一個(gè)參數(shù)URL

可選。打開指定的頁面的URL。如果沒有指定URL，打開一個(gè)新的空白窗口

第二個(gè)參數(shù)name

可選。指定target屬性或窗口的名稱。支持以下值：

_blank - 在新窗口顯示目標(biāo)網(wǎng)頁。這是默認(rèn)
_self - 在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁
_top - 框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁(不常用)

第三個(gè)參數(shù)

可選參數(shù)，設(shè)置窗口參數(shù)，各參數(shù)用逗號(hào)隔開。

關(guān)閉窗口 window.close()

用法

window.close(); ? //關(guān)閉本窗口
或者
<窗口對(duì)象>.close(); ? //關(guān)閉指定的窗口

例子：關(guān)閉新窗口

?var mywin=window.open('http://www.xxx.com'); //將新打的窗口對(duì)象，存儲(chǔ)在變量mywin中
?mywin.close();

vue路由跳轉(zhuǎn)打開新窗口(被瀏覽器攔截)

今天做了一個(gè)功能是點(diǎ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)我們用到第二種方法時(shí)候，是觸發(fā)事件請(qǐng)求接口根據(jù)條件去判斷在進(jìn)行路由跳轉(zhuǎn)，這個(gè)時(shí)候就會(huì)遇到瀏覽器被攔截的問題

在接口請(qǐng)求的回調(diào)函數(shù)中需要使用window.open（）打開新頁面，但是等接口請(qǐng)求成功之后，window.open（）打開新頁面總是被瀏覽器攔截，原因大概是，放在請(qǐng)求回調(diào)函數(shù)中的操作，被瀏覽器認(rèn)為不是用戶主動(dòng)觸發(fā)的事件，并且延遲1000ms ，被認(rèn)為有可能是廣告，于是被攔截

解決的方法：

在接口請(qǐng)求之前先打開一個(gè)空的頁面

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
?? ? ?})
?}