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

項目場景：

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

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

window.open()的用法

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

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

碼如下：

路徑：

{
    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;機巢監(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中對window.openner的使用

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

背景

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

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

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

（2）點擊小鈴鐺時，斷開父頁面mqtt連接并且在新窗口打開頁面

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

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

以失敗告終的嘗試——EventBus

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

main.js文件中：

Vue.prototype.$EventBus = new Vue()

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

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', {})

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

救星——Window.opener

于是乎查資料了解到Window.opener可以返回對打開當(dāng)前窗口的那個窗口的引用。也就說如果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中也是不起作用的，在關(guān)閉子頁面時父頁面的reConnect方法并不能被調(diào)用。

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

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

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

這樣問題終于解決啦~

總結(jié)

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

參考資料

【1】MDN：window.opener

【2】MDN: Window: beforeunload event

【3】window-onbeforeunload 的使用

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

最新評論