electron-vue 自定义菜单

简介: electron-vue 自定义菜单

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


目录
相关文章
|
12天前
4.Electron之自定义菜单(绑定快捷键、点击事件)
4.Electron之自定义菜单(绑定快捷键、点击事件)
17 1
|
3天前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
|
2月前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
172 0
|
8月前
|
前端开发 算法 JavaScript
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
91 0
|
8月前
|
存储 Web App开发 JavaScript
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
132 0
|
10月前
|
Web App开发 资源调度 前端开发
基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
87 0
|
11月前
|
前端开发 JavaScript 开发者
前端桌面应用开发:Electron介绍与实践(3)
前端桌面应用开发:Electron介绍与实践(3)
|
11月前
|
前端开发
前端桌面应用开发:Electron介绍与实践(2)
前端桌面应用开发:Electron介绍与实践(2)
|
11月前
|
开发框架 前端开发 JavaScript
前端桌面应用开发:Electron介绍与实践(1)
前端桌面应用开发:Electron介绍与实践
220 0
|
12月前
|
JavaScript 前端开发 安全
electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)
electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)
336 0