vue使用window.open（）跳轉(zhuǎn)頁面

項(xiàng)目場(chǎng)景：

提示：項(xiàng)目需要vue帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口：

例如：點(diǎn)擊機(jī)巢監(jiān)控按鈕，在當(dāng)前頁面重新打開一個(gè)窗口到另一個(gè)頁面（同時(shí)把參數(shù)全部帶過去）

window.open()的用法

open() 方法用于打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。

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

碼如下：

路徑：

{
    path: "/machineMonitor",
    name: "xxx平臺(tái)",
    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;機(jī)巢監(jiān)控
</el-button>

 跳轉(zhuǎn)事件： 

handleReadMachine(row) {
      let newUrl = this.$router.resolve({
        path: "/machineMonitor",
        query: {
          data: JSON.stringify(row),
        },
      });
      window.open(newUrl.href, "_blank");
    },

vue中對(duì)window.openner的使用

先說結(jié)論：window.openner是做什么的？在vue中新窗口可以使用window.openner調(diào)用父窗口的方法。下面就來通過筆者的文章進(jìn)行更詳細(xì)的學(xué)習(xí)吧！

背景

最近項(xiàng)目中使用到了Mqtt做即時(shí)通訊的功能，需求要求主頁面全局要有一個(gè)消息提示功能，當(dāng)收到一條消息則小鈴鐺右上方顯示新消息的數(shù)目，點(diǎn)擊小鈴鐺則全局停止接收消息并且瀏覽器打開新窗口，在新頁面中接收消息，如下圖所示：

要實(shí)現(xiàn)如上需求需要考慮如下幾點(diǎn)：

（1）在父頁面中建立Mqtt連接并接收消息

（2）點(diǎn)擊小鈴鐺時(shí)，斷開父頁面mqtt連接并且在新窗口打開頁面

（3）在新頁面中建立Mqtt連接并接收消息

（4）新頁面關(guān)閉時(shí)，要通知父頁面重新建立Mqtt連接并接收消息

以失敗告終的嘗試——EventBus

小腦瓜左思右想之后，確定了關(guān)鍵點(diǎn)不就在于新窗口關(guān)閉了通知一下父窗口嗎~ 用EventBus試試吧！于是乎寫了如下代碼：

main.js文件中：

Vue.prototype.$EventBus = new Vue()

父頁面中寫一個(gè)方法用于在新窗口中打開子頁面：

toServerWorkbench() {
  const path = this.$router.resolve({ name: 'CustomerService' })
  window.open(path.href, '_blank')
},

父頁面created生命周期中監(jiān)聽reConnect事件：

this.$EventBus.$on('reConnect', () => {
  console.log('接到通知重新連接')
  this.getMqttInfo()
})

新窗口頁面beforeDestroy生命周期中觸發(fā)reConnect事件：

this.$EventBus.$emit('reConnect', {})

幾下子代碼寫完了，幸福感爆棚感覺可以摸魚了！然而一測(cè)試發(fā)現(xiàn)沒有效果（藍(lán)瘦香菇）~想了想，不好使很正常啊，都是新窗口打開的頁面和原來的頁面都不是一個(gè)vue實(shí)例了，就沒有辦法使用EventBus進(jìn)行通訊了。

救星——Window.opener

于是乎查資料了解到Window.opener可以返回對(duì)打開當(dāng)前窗口的那個(gè)窗口的引用。也就說如果A打開了B，那么B中可以使用Window.openner來引用A。

于是寫了如下代碼：

父頁面created生命周期：

window.reConnect = () => {
  console.log('接到通知重新連接')
  this.getMqttInfo()
};

這段代碼給父頁面增加了一個(gè)reConnect方法，注意是加在了window上，這樣才能使用window.openner取到這個(gè)reConnect方法。

子頁面beforeDestroy生命周期：

if (window.opener && window.opener.reConnect) {
  window.opener.reConnect()
} else {
  window.opener.frames[0].reConnect()
}

注意，這段代碼寫在子頁面的beforeDestroy中也是不起作用的，在關(guān)閉子頁面時(shí)父頁面的reConnect方法并不能被調(diào)用。

于是又查資料了解到window的onbeforeunload事件，當(dāng)瀏覽器窗口關(guān)閉或者刷新時(shí)，會(huì)觸發(fā) beforeunload 事件。

有了這個(gè)事件，我們可以使網(wǎng)頁能夠觸發(fā)一個(gè)確認(rèn)對(duì)話框，詢問用戶是否真的要離開該頁面。如果用戶確認(rèn)，瀏覽器將導(dǎo)航到新頁面，否則導(dǎo)航將會(huì)取消。同樣的，我們可以在這個(gè)事件中調(diào)用父頁面的方法，如下代碼所示：

created() {
  window.onbeforeunload = () => {
    if (window.opener && window.opener.reConnect) {
      window.opener.reConnect()
    } else {
      window.opener.frames[0].reConnect()
    }
  }
},

這樣問題終于解決啦~

總結(jié)

Window.opener可以返回對(duì)打開當(dāng)前窗口的那個(gè)窗口的引用，可以使用它調(diào)用父頁面的方法；當(dāng)瀏覽器窗口關(guān)閉或者刷新時(shí)會(huì)觸發(fā) beforeunload 事件，當(dāng)我們界面中有未提交的表單，或者有未保存的文本內(nèi)容，用戶點(diǎn)擊關(guān)閉按鈕，需要瀏覽器彈出提示框，就需要使用這個(gè)事件 onbeforeunload。

參考資料

【1】MDN：window.opener

【2】MDN: Window: beforeunload event

【3】window-onbeforeunload 的使用

到此這篇關(guān)于vue中對(duì)window.openner的使用的文章就介紹到這了,更多相關(guān)vue window.openner使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論