Electron-vue + VueRouter构建桌面应用

在桌面应用开发过程中，往往会涉及到窗口大小和位置的改变。如果说每一个不同大小的窗口都重新new 一个BrowserWindow的话，个人觉得太耗性能！
针对需求中只需要开启一个窗口的情况下，可以考虑使用Vue Router搭配Electron的IPC消息通讯机制进行窗口内容和大小更改。

关键点：vue router钩子

router提供了一个全局钩子router.beforeEach

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

具体参数字段请查看官网。

每次路由的更改都会经过该方法，只有手动执行next()方法，路由才会真正跳转，所以我们就可以在这个钩子中向主进程发送消息更改窗口大小，而主进程中监听消息根据参数重新设置窗口大小和位置就OK。

实例：

我采用的是beforeEnter，即在路由配置时定义路由钩子。

渲染进程router.js

import Vue from 'vue'
import Router from 'vue-router'
import {ipcRenderer} from 'electron'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default,
      beforeEnter: (to, from, next) => {
        ipcRenderer.send('changeWindowSize', {width: 1000, height: 563})
        console.log('进入主页')
        next()
      }
    },
    {
      path: '/all',
      name: 'all-class-anwser',
      component: require('@/components/AllClassAnswer/AllClassAnswer').default,
      beforeEnter: (to, from, next) => {
        ipcRenderer.send('changeWindowSize', {width: 200, height: 200})
        console.log('进入全班作答')
        next()
      }
    }
  ]
})

主进程监听消息：

import { app, BrowserWindow, ipcMain } from 'electron'
// ...创建窗口，监听ready
ipcMain.on('changeWindowSize', (event, arg) => {
  mainWindow && mainWindow.setSize(arg.width, arg.height)
// mainWindow为主进程new的BrowserWindow实例
})

大家可能会考虑消息延迟导致路由已经跳转但是窗口大小还没有改变的情况，我测试30次窗口来回切换，发现IPC消息响应很快，几乎在一瞬间，肉眼几乎感觉不到路由跳转和窗口大小变化两者之间的延迟，所以可以放心使用。

以上为我个人观点，如有不恰当的或者不对的地方还请大牛们帮与修正~