vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())
程序员文章站
2022-06-26 16:22:24
...
需求:从当前页面跳转到其他页面时,打开一个新窗口
比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航
编程式导航
使用路由对象的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();
上一篇: 不可思议:俄罗斯研究出将数据存储逾100万年永久光盘
下一篇: shell编程之变量