3、electron-vue菜单栏跳转

最新推荐文章于 2025-03-29 08:30:00 发布

诺风丶

最新推荐文章于 2025-03-29 08:30:00 发布

阅读量4.4w

点赞数 3

分类专栏： electron-vue electron-vue 文章标签： electron-vue electron

本文链接：https://blog.youkuaiyun.com/q809198545/article/details/79546064

版权

electron-vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

electron-vue

13 篇文章

订阅专栏

本文介绍了两种在Electron-Vue中实现菜单栏跳转的方法：主线程与渲染线程通信及直接路由跳转。推荐使用主线程与渲染线程通信的方式，因为直接路由跳转可能会导致页面渲染延迟，影响用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：主线程与渲染线程通信

（1）在主线程目录main的index.js配置如下，其中 mainWindow是BrowserWindow对象

...
const template = [{
        label: '主页',
        click() {
            mainWindow.webContents.send('href', 'home');
        }
    },
    {
        label: '设备',
        click() {
            mainWindow.webContents.send('href', 'device');
        }
    },
    {
        label: '配置',
        click() {
            mainWindow.webContents.send('href', 'config');
        }
    }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
...

（2）渲染线程目录renderer/router下的index.js,其中router是vuejs的路由

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);
const { ipcRenderer } = require('electron');

Vue.use(Router);
const { ipcRenderer } = require('electron');

let router = new Router({
    routes: [{
            path: '/',
            name: 'home',
            component: require('@/page/Home').default
        },
        {
            path: '/device',
            name: 'device',
            component: require('@/page/Device').default
        },
        {
            path: '/config',
            name: 'config',
            component: require('@/page/config').default
        },
        {
            path: '*',
            redirect: '/'
        }
    ]
});

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

export default router;

方法二：路由跳转

（1）在主线程目录main的index.js配置如下，其中 mainWindow是BrowserWindow对象

...
const template = [{
        label: '主页',
        click() {
            mainWindow.loadURL(winURL + '#/home');
        }
    },
    {
        label: '设备',
        click() {
            mainWindow.loadURL(winURL + '#/device');
        }
    },
    {
        label: '配置',
        click() {
            mainWindow.loadURL(winURL + '#/config');
        }
    }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
...

建议用方法一，方法二页面渲染有延迟，用户体验差