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

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