Electron implementa la apertura de una ventana secundaria y la ventana carga la página del componente especificada por el enrutamiento vue

Objetivo : Cuando uso electron-vue para desarrollar aplicaciones de escritorio, espero que la ventana principal abra una nueva ventana y que la interfaz de la nueva ventana sea la página del componente vue desarrollada por mí. El enrutamiento Vue se utiliza aquí para saltar a la página.

Proceso principal 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)
})

Proceso de renderizado renderer.js

const {
    
     contextBridge } = require('electron')

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

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

El método openWindow se llama a través del evento vinculado en el componente vue.

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

Errores a tener en cuenta : al crear rutas, debe utilizar el enrutamiento hash. Si utiliza el modo historial, no podrá encontrar la ruta.

Je suppose que tu aimes

Origine blog.csdn.net/Luo_LA/article/details/129957318
conseillé
Classement