我应该如何使用 Electron Menu click() 事件更改 Vue 路由？

Question

在我的构建中，我可以通过路由链接路由到每个组件，但不能通过菜单 click() 事件。

在菜单模板中，我尝试使用以下方法更改路线：

win!.loadURL(“http://localhost:8080/login”)，例如，但在运行构建时它只是变为空白（对于任何 URL）。

另外，如果我导入路由器并尝试使用router.push()，在主进程中会出现很多错误，而且也不起作用。

如果我使用 electron:serve，而不是运行构建，它可以正常工作。虽然它从 Menu 重新加载页面，但与 router-links 不同，它通过它保持在同一页面并简单地更改路由组件。

我需要一个从菜单和路由器链接更改路由视图的构建。

那么，我怎样才能从 Electron 菜单更改我的 SPA 的路线，并使其在最终构建上运行，因为它在通过调用 electron:serve 运行开发项目时可以工作？

我应该如何使用 Electron Menu click() 事件更改 Vue 路由？

完整项目：

https://github.com/danielpm1982/open-weather-client

Answer 1

您无法从 Electron 主进程内部更改路由或使用 Vue-router，因为您也无法从任何 Vue 组件内部访问 Electron 菜单以根据登录状态激活/停用子菜单（另一个怀疑是我自己发帖和回答的）。

应始终在 Electron 主进程中管理电子菜单。

应始终在 Electron 渲染器进程中管理 Vue 路由 - 从 Vue 组件内部。

因此，由于事件是在与应处理的层不同的层上生成的，因此在这两种情况下，只需通过 IPC 消息通知彼此的层，您希望该事物发生变化并且它将在那里发生变化，在适当的层。

在更改菜单的情况下，在 Vue 组件内部检查登录 / 注销 Vuex 状态，然后组件向主进程发送 IPC 调用，并在那里激活或停用子菜单。 在链接上查看此解决方案：
How to activate / deactivate an Electron.js submenu from inside a Vue.js Component according to a specific Vuex state?

另一个类似的解决方案是这个帖子问题的解决方案，但反过来：

要更改路由，而不是在主进程端使用 win.loadURL() 或 win.loadFile()，应该将 IPC 调用发送到渲染器端，在这种情况下发送到 App.vue 组件，使用win!.webContents.send("changeRouteTo", "/")，例如。 “changeRouteTo”是自定义通道名称，“/”是路由器从 Vue 组件内部，在渲染器端将路由更改为的路径 - 对于“/”，它是“Home”路由.要更改为“登录”路由，路径将是“/登录”，依此类推……根据 router.ts 配置。在渲染器端，在本例中为 App.vue 组件，它为“changeRouteTo”通道或事件设置了一个 IPC 渲染器侦听器，并且每次它从主进程接收到路由更改请求，然后 this.$ router.push() 用于在此组件内部将路由更改为对应的路由。

这应该适用于开发和非开发环境，当使用 npm run electron:serve 运行项目时，至于最终的构建执行，在调用 npm run electron:build 并创建一个包之后。

希望这个解决方案对其他人有用。

在此处查看完整的最终项目，这是一个非常不错的示例应用：
https://github.com/danielpm1982/open-weather-client