electron实现打开子窗口，窗口加载vue路由指定的组件页面

目标：使用electron-vue开发桌面端应用时，希望主窗口打开一个新窗口，并且新窗口的界面是自己开发的vue组件页面。这里使用vue路由进行页面跳转。

主进程 background.js

//var childWin;  // 把childWin设置在函数外面和设置在函数里面效果不一样！
// 判断开发环境
const winURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:8080'
  : `file://${
      
      __dirname}/index.html`

function openChildWindow(param) {
    
    
  var childWin = new BrowserWindow({
    
    
    width: param.width,
    height: param.height,
    parent: win, // win是主窗口，不加parent，新建的窗口将于主窗口平级
    webPreferences: {
    
    
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.resolve(__dirname, "../preload.js")
    }
  })

  childWin.loadURL(winURL + '#' + param.url)  // hash路由

  childWin.webContents.openDevTools()

  childWin.on('closed', () => {
    
     childWin = null })
}

ipcMain.handle('on-open-event', (e, param) => {
    
    
  openChildWindow(param)
})

渲染进程 renderer.js

const {
    
     contextBridge } = require('electron')

const openWindow = (param) => {
    
    
    ipcRenderer.invoke('on-open-event', param)
}

contextBridge.exposeInMainWorld('myApi',{
    
     openWindow });

vue组件内通过绑定的事件调用openWindow方法

openWindow() {
    
    
   const param = {
    
    
       url: '/luao',  // 路由路径
       width: 800,
       height: 800
   }
   myApi.openWindow(param)
}

要注意的坑：创建路由的时候要使用hash路由，使用history模式的话会找不到路径