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


目录
相关文章
|
5月前
4.Electron之自定义菜单(绑定快捷键、点击事件)
4.Electron之自定义菜单(绑定快捷键、点击事件)
596 1
|
17天前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
3月前
|
JavaScript 开发工具
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
|
4月前
|
前端开发
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端效率软件
|
6月前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
339 0
|
前端开发 算法 JavaScript
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
169 0
|
存储 Web App开发 JavaScript
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
240 0
|
Web App开发 资源调度 前端开发
基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
138 0
|
前端开发 JavaScript API
React使用Electron开发桌面端
React是一个流行的JavaScript库,用于构建Web应用程序。结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤:
React使用Electron开发桌面端
|
前端开发 JavaScript 开发者
前端桌面应用开发:Electron介绍与实践(3)
前端桌面应用开发:Electron介绍与实践(3)
127 0