本文详解在Vue中使用编程式导航通过window.open打开新窗口的方法，包括resolve解析路由及携带参数跳转。重点解决异步接口回调中window.open被浏览器拦截的问题，提供先打开空窗口再赋值location的改良方案，并简述关闭窗口技巧。
Vue路由跳转打开新窗口与关闭窗口的实现
需求场景：在当前页面执行跳转操作时，要求打开一个新的浏览器窗口。
例如：点击页面上的“用户反馈”按钮，需在新窗口中展示反馈页面，这需要使用编程式导航来实现。
编程式导航实现
利用路由对象的resolve方法解析目标路由，可获取location、router、href等路由信息。获取到href后，即可调用window.open打开新窗口。
具体代码实现如下：
// 路由跳转新界面
userFeedback() {
// this.$router.push({ path: '/feedback' });
用push,也能实现跳转，但是不能打开新页面。
const { href } = this.$router.resolve({
path: '/feedback'
});
window.open(href, '_blank');
},对于需要携带参数跳转的复杂路由，可采用query方式传递参数，写法如下：
<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)第一个参数为URL
可选参数，指定打开页面的URL。若未指定，则打开一个空白窗口。
第二个参数为name
可选参数，指定target属性或窗口名称。支持以下值：
_blank- 在新窗口显示目标网页，此为默认值_self- 在当前窗口显示目标网页_top- 在框架网页的上部窗口中显示目标网页（较少使用）
第三个参数为specs
可选参数，用于设置窗口属性，各属性之间用逗号分隔。
关闭窗口 window.close()
使用方法
window.close(); //关闭本窗口
或者
<窗口对象>.close(); //关闭指定的窗口示例：关闭新打开的窗口
var mywin=window.open('http://www.xxx.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();Vue路由跳转打开新窗口时可能被浏览器拦截的问题
近期开发了一个功能：点击按钮后，通过路由跳转打开新页面。
第一种实现方法
<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')
})
} 当采用第二种方法时，需先触发事件请求接口，根据返回条件判断后再执行路由跳转。此时常遇到浏览器拦截问题。
若在接口请求的回调函数中调用window.open()，页面往往会被浏览器拦截。原因是浏览器认为回调中的操作并非用户直接主动触发，且存在约1000ms的延迟，可能被判定为广告行为从而被拦截。
解决方法如下：
在发起接口请求之前，先调用window.open打开一个空白页面。
let tempPage=window.open('' ", _blank');然后在接口请求的回调函数中，将目标URL赋值给该空白页面的location属性。
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
})
}总结
以上为个人经验分享，希望能为大家提供参考，也希望大家多多支持本站。