Electron implements opening a child window, and the window loads the component page specified by vue routing

Goal : When using electron-vue to develop desktop applications, I hope that the main window will open a new window, and the interface of the new window will be the vue component page developed by myself. Vue routing is used here to jump to the page.

Main process 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)
})

Rendering process renderer.js

const {
    
     contextBridge } = require('electron')

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

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

The openWindow method is called through the bound event in the vue component.

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

Pitfalls to note : When creating routes, you must use hash routing. If you use history mode, you will not be able to find the path.