electron-vue的多窗口插件

使用說明：https://npm.taobao.org/package/electron-vue-windows
https://github.com/hxkuc/electron-vue-windows
https://www.ctolib.com/hxkuc-electron-vue-windows.html

首先安裝electron-vue 然后安裝此插件執行如下操作

npm i -S electron-vue-windows

在renderer/main.js里初始化加入以下代碼（注意本插件依賴於vue和vue-router需要在vue和vue-router初始化完畢再加載）

import Vue from 'vue'
import router from './router' // 此處router文件為你的路由配置文件
import Win from 'electron-vue-windows'
// 初始化插件，要傳入實例化的路由
Win.init(router, {
  freeWindowNum: 2, // 初始空閑窗口數量（選填：默認為1）
  port: 9080 // 端口號（選填：默認9080）
})
Vue.prototype.$Win = Win

使用插件
index.vue

let data = await this.$Win.openWin({
  // browserwindow原生屬性
  width: 700, // 窗口寬
  height: 600, // 窗口高
  
  // electron-vue-windows自定義的屬性
  windowConfig: {
    router: '/user', // 路由 *必填
    data: {id: 1}, // 傳送數據 
    name: 'user' // 窗口名稱
  }
})
console.log(data) // 新窗口返回的數據 {value: 2}

ser.vue
獲取傳入的參數

let data = this.$Win.getParameter()
console.log(data) // {id: 1}
返回數據並關閉當前窗口
let data = {value: 2}
this.$Win.closeWin(data)