vue使用window.open()跳转页面的代码案例

 更新时间:2022年11月25日 15:59:04   作者:NewName  
这篇文章主要介绍了vue中对window.openner的使用,vue使用window.open()跳转页面的代码案例,本文通过实例代码给大家详细讲解,需要的朋友可以参考下

vue使用window.open()跳转页面

项目场景:

提示:项目需要vue带参数跳转打开新页面、新窗口

例如:点击机巢监控按钮,在当前页面重新打开一个窗口到另一个页面(同时把参数全部带过去)

window.open()的用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open(URL,name,specs,replace)

specs

可选。一个逗号分隔的项目列表。支持以下值:

channelmode=yes|no|1|0是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器
height=pixels窗口的高度。最小.值为100
left=pixels该窗口的左侧位置
location=yes|no|1|0是否显示地址字段.默认值是yes
menubar=yes|no|1|0是否显示菜单栏.默认值是yes
resizable=yes|no|1|0是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0是否显示滚动条.默认值是yes
status=yes|no|1|0是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0是否显示浏览器工具栏.默认值是yes
top=pixels窗口顶部的位置.仅限IE浏览器
width=pixels窗口的宽度.最小.值为100

replaceOptional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
  • true - URL 替换浏览历史中的当前条目。
  • false - 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>&nbsp;机巢监控
</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。

参考资料

【1】MDN:window.opener

【2】MDN: Window: beforeunload event

【3】window-onbeforeunload 的使用

到此这篇关于vue中对window.openner的使用的文章就介绍到这了,更多相关vue window.openner使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue使用中的内存泄漏【推荐】

    vue使用中的内存泄漏【推荐】

    内存泄露是指new了一块内存,但无法被释放或者被垃圾回收。这篇文章主要介绍了vue使用中的内存泄漏,需要的朋友可以参考下
    2018-07-07
  • Vue项目中引入 ECharts

    Vue项目中引入 ECharts

    这篇文章主要介绍了Vue项目中引入 ECharts,ECharts是一个强大的画图插件,在vue项目中,我们常常可以引用Echarts来完成完成一些图表的绘制;以下介绍vue项目中引用并使用ECharts,具有一定的参考价值,需要的小伙伴可以参考一下
    2021-12-12
  • vue项目中使用ueditor的实例讲解

    vue项目中使用ueditor的实例讲解

    下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 动态修改a标签的样式的方法

    vue 动态修改a标签的样式的方法

    这篇文章主要介绍了vue 动态修改a标签的样式的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 使用 vue 实例更好的监听事件及vue实例的方法

    使用 vue 实例更好的监听事件及vue实例的方法

    这篇文章主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法,单独监听事件,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue父组件触发事件改变子组件的值的方法实例详解

    vue父组件触发事件改变子组件的值的方法实例详解

    这篇文章主要介绍了vue父组件触发事件改变子组件的值的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 代码详解Vuejs响应式原理

    代码详解Vuejs响应式原理

    这篇文章主要介绍了代码详解Vuejs响应式原理的基础知识,有兴趣的朋友们参考学习下吧。
    2017-12-12
  • Vue实现导出excel表格功能

    Vue实现导出excel表格功能

    这篇文章主要介绍了Vue实现导出excel表格的功能,在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
    2018-03-03
  • vue3使用viewer的详细用法举例

    vue3使用viewer的详细用法举例

    viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下
    2023-12-12
  • Vuex localStorage的具体使用

    Vuex localStorage的具体使用

    本文主要介绍了Vuex localStorage的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

最新评论