electron-vue 自定义菜单

目录

1. 加载自定义菜单

2. 定义路由

---

1. 加载自定义菜单

 src\main\index.js

在function createWindow 之后，app.on('ready' 之前，添加下方代码：

const menuTemplate = [{
  label: '主页',
  click() {
    // 页面跳转方式一（推荐）
    mainWindow.webContents.send('href', '/index');
    // 页面跳转方式二
    // mainWindow.loadURL(winURL+'#/index')
  }
},
{
  label: '测试页',
  submenu: [
    {
      label: '第1页',
      click() {
        mainWindow.webContents.send('href', '/page1');
      }
    },
    {
      label: '第2页',
      click() {
        mainWindow.webContents.send('href', '/page2');
      }
    }
  ]
}
];

var Menu = require('electron').Menu;
Menu.setApplicationMenu( Menu.buildFromTemplate(menuTemplate));

2. 定义路由

src\renderer\router\index.js

将原文件替换为下方代码，重点在引入ipcRenderer 接收主进程传来的路由参数，进行路由跳转

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: require('@/components/index').default
    },
    {
      path: '/page1',
      component: require('@/components/demo/page1').default
    },
    {
      path: '/page2',
      component: require('@/components/demo/page2').default
    },
    {
      path: '/test',
      name: 'test',
      component: require('@/components/test').default
    },
    {
      path: '*',
      redirect: '/index'
    }
  ]
})

// 渲染进程接收主进程的传参
const { ipcRenderer } = require('electron');

ipcRenderer.on('href', (event, arg) => {
  if (arg) {
    router.push({ path: arg });
  }
});

export default router