electron vue 打开新窗口

1、主进程

background.js文件

const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:8080` : `file://${__dirname}/index.html`

//事件名      openWindow是事件名
ipcMain.on('openWindow', function () {
  //调用 BrowserWindow打开新窗口
  const win2 = new BrowserWindow({
      width:400,
      height:300,
      webPreferences: {
        devTools: true,
        nodeIntegration: true,
        enableRemoteModule: true,
        contextIsolation: false,
      },
  })
  //test页面路由
  win2.loadURL(winURL+"#/test");

  win2.webContents.openDevTools();

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

2、渲染进程

Index.vue页面

<template>
  <div class="index">
      <button @click="openwin">打开新窗口</button>
  </div>
</template>

<script>
const { ipcRenderer } = window.require("electron");
    
export default {
  name: "index",
  components: {},
  data() {
    return {};
  },
  methods: {
    openwin(){
        //触发事件名
        ipcRenderer.send("openWindow");
    }
  },
};
</script>
<style lang="scss" scoped>
</style>

Test.vue页面

<template>
  <div class="test">
    我是test页面
  </div>
</template>

<script>
export default {
  name: "test",
  components: {},
  data() {
    return {};
  },
  methods: {
    
  },
};
</script>
<style lang="scss" scoped>
</style>

3、路由

{
  path: '/test',
  name: 'test',
  component: () => import('@/views/Test.vue')
},