目标:使用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模式的话会找不到路径