vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())
目录
- vue路由跳转打开新窗口和关闭窗口
- 编程式导航
- window.open( )方法
- 关闭窗口 window.close()
- vue路由跳转打开新窗口(被浏览器拦截)
- 第一种方法
- 第二种方法
- 第二种方法（改良版）
- 总结
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
})
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
赞 (0)