vue使用window.open()跳转页面的代码案例
NewName 人气:0vue使用window.open（）跳转页面
项目场景：
提示：项目需要vue带参数跳转打开新页面、新窗口：
例如：点击机巢监控按钮，在当前页面重新打开一个窗口到另一个页面（同时把参数全部带过去）
window.open()的用法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)
| specs | 可选。一个逗号分隔的项目列表。支持以下值：
| ||||||||||||||||||||||||||||
| replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
|
码如下：
路径：
{
path: "/machineMonitor",
name: "xxx平台",
component: () => import("@/page/machineMonitor"),
meta: {
keepAlive: false,
isTab: false,
isAuth: true
}
},按钮：
<el-button size="mini" type="primary" @click="handleReadMachine(item)"
style="margin: 5px 5px 5px 0"><i class="my-icon el-icon-view"></i> 机巢监控
</el-button>跳转事件：
handleReadMachine(row) {
let newUrl = this.$router.resolve({
path: "/machineMonitor",
query: {
data: JSON.stringify(row),
},
});
window.open(newUrl.href, "_blank");
},vue中对window.openner的使用
先说结论：window.openner是做什么的？在vue中新窗口可以使用window.openner调用父窗口的方法。下面就来通过笔者的文章进行更详细的学习吧！
背景
最近项目中使用到了Mqtt做即时通讯的功能，需求要求主页面全局要有一个消息提示功能，当收到一条消息则小铃铛右上方显示新消息的数目，点击小铃铛则全局停止接收消息并且浏览器打开新窗口，在新页面中接收消息，如下图所示：
要实现如上需求需要考虑如下几点：
（1）在父页面中建立Mqtt连接并接收消息
（2）点击小铃铛时，断开父页面mqtt连接并且在新窗口打开页面
（3）在新页面中建立Mqtt连接并接收消息
（4）新页面关闭时，要通知父页面重新建立Mqtt连接并接收消息
以失败告终的尝试——EventBus
小脑瓜左思右想之后，确定了关键点不就在于新窗口关闭了通知一下父窗口吗~ 用EventBus试试吧！于是乎写了如下代码：
main.js文件中：
Vue.prototype.$EventBus = new Vue()
父页面中写一个方法用于在新窗口中打开子页面：
toServerWorkbench() {
const path = this.$router.resolve({ name: 'CustomerService' })
window.open(path.href, '_blank')
},父页面created生命周期中监听reConnect事件：
this.$EventBus.$on('reConnect', () => {
console.log('接到通知重新连接')
this.getMqttInfo()
})新窗口页面beforeDestroy生命周期中触发reConnect事件：
this.$EventBus.$emit('reConnect', {})几下子代码写完了，幸福感爆棚感觉可以摸鱼了！然而一测试发现没有效果（蓝瘦香菇）~想了想，不好使很正常啊，都是新窗口打开的页面和原来的页面都不是一个vue实例了，就没有办法使用EventBus进行通讯了。
救星——Window.opener
于是乎查资料了解到Window.opener可以返回对打开当前窗口的那个窗口的引用。也就说如果A打开了B，那么B中可以使用Window.openner来引用A。
于是写了如下代码：
父页面created生命周期：
window.reConnect = () => {
console.log('接到通知重新连接')
this.getMqttInfo()
};这段代码给父页面增加了一个reConnect方法，注意是加在了window上，这样才能使用window.openner取到这个reConnect方法。
子页面beforeDestroy生命周期：
if (window.opener && window.opener.reConnect) {
window.opener.reConnect()
} else {
window.opener.frames[0].reConnect()
}注意，这段代码写在子页面的beforeDestroy中也是不起作用的，在关闭子页面时父页面的reConnect方法并不能被调用。
于是又查资料了解到window的onbeforeunload事件，当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。
有了这个事件，我们可以使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。同样的，我们可以在这个事件中调用父页面的方法，如下代码所示：
created() {
window.onbeforeunload = () => {
if (window.opener && window.opener.reConnect) {
window.opener.reConnect()
} else {
window.opener.frames[0].reConnect()
}
}
},这样问题终于解决啦~
总结
Window.opener可以返回对打开当前窗口的那个窗口的引用，可以使用它调用父页面的方法；当浏览器窗口关闭或者刷新时会触发 beforeunload 事件，当我们界面中有未提交的表单，或者有未保存的文本内容，用户点击关闭按钮，需要浏览器弹出提示框，就需要使用这个事件 onbeforeunload。
参考资料
加载全部内容