vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

来源：jb51　　时间：2023/4/14 9:17:57　　对本文有异议

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。如果没有指定URL，打开一个新的空白窗口

第二个参数name

可选。指定target属性或窗口的名称。支持以下值：

_blank - 在新窗口显示目标网页。这是默认
_self - 在当前窗口显示目标网页
_top - 框架网页中在上部窗口中显示目标网页(不常用)

第三个参数

可选参数，设置窗口参数，各参数用逗号隔开。

关闭窗口 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（）打开新页面，但是等接口请求成功之后，window.open（）打开新页面总是被浏览器拦截，原因大概是，放在请求回调函数中的操作，被浏览器认为不是用户主动触发的事件，并且延迟1000ms ，被认为有可能是广告，于是被拦截

解决的方法：

在接口请求之前先打开一个空的页面

let tempPage=window.open('' ", _blank');

然后在回调函数中，

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