在electron-vite-vue项目中实现窗口关闭与新窗口路由跳转

概述

在electron-vite-vue项目中，开发者经常需要实现这样的功能：点击按钮关闭当前窗口，同时打开一个新窗口并跳转到指定路由。这种场景在桌面应用开发中十分常见，比如用户登录后跳转到主界面，或者切换不同的功能模块时。

核心实现方案

1. 创建新窗口

在Electron中，可以通过BrowserWindow模块创建新窗口。首先需要在主进程(main process)中编写创建窗口的逻辑：

// 在主进程文件中
import { BrowserWindow } from 'electron'

function createNewWindow(routePath) {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  
  // 加载指定路由的页面
  win.loadURL(`your-app-url#${routePath}`)
  
  return win
}

2. 进程间通信

由于窗口操作需要在主进程中进行，而Vue组件运行在渲染进程(renderer process)中，需要使用进程间通信(IPC)来协调：

// 在渲染进程中
import { ipcRenderer } from 'electron'

function openNewWindowAndCloseCurrent(routePath) {
  ipcRenderer.send('open-new-window', routePath)
  window.close() // 关闭当前窗口
}

在主进程中监听这个事件：

// 在主进程中
ipcMain.on('open-new-window', (event, routePath) => {
  createNewWindow(routePath)
})

3. 结合Vue Router

为了使新窗口能够正确加载Vue Router的路由，需要确保：

1. 在创建窗口时，URL中包含正确的hash路由
2. Vue Router实例已经正确初始化

在Vue组件中可以这样实现：

methods: {
  handleButtonClick() {
    const targetRoute = '/dashboard' // 目标路由路径
    this.$router.push(targetRoute) // 在当前窗口跳转(可选)
    this.openNewWindow(targetRoute)
  },
  openNewWindow(route) {
    // 调用前面定义的IPC通信方法
    ipcRenderer.send('open-new-window', route)
    window.close()
  }
}

注意事项

1. 窗口管理：Electron需要手动管理窗口的生命周期，避免内存泄漏
2. 路由同步：确保新窗口的路由状态与预期一致
3. 安全性：合理设置webPreferences，平衡功能需求与安全性
4. 用户体验：考虑添加加载动画，避免窗口切换时的视觉空白

高级技巧

1. 窗口参数传递：可以通过URL参数或IPC传递更多初始化数据
2. 窗口复用：检查是否已有相同路由的窗口，避免重复创建
3. 窗口样式一致：确保新窗口与现有窗口的样式和行为一致
4. 错误处理：添加适当的错误处理逻辑，比如路由不存在时的回退方案

通过以上方法，开发者可以在electron-vite-vue项目中优雅地实现窗口关闭与新窗口路由跳转的功能，提升应用的用户体验。