Electron は子ウィンドウを開く機能を実装し、ウィンドウは vue routing で指定されたコンポーネント ページをロードします。

目標: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 });

openWindow メソッドは、vue コンポーネントのバインドされたイベントを通じて呼び出されます。

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

注意すべき落とし穴: ルートを作成するときはハッシュ ルーティングを使用する必要があり、履歴モードを使用するとパスを見つけることができなくなります。

おすすめ

転載: blog.csdn.net/Luo_LA/article/details/129957318