gpt4 book ai didi

vue.js - 如何使用 Electron 菜单click()事件更改Vue路线?

转载 作者:行者123 更新时间:2023-12-03 12:38:51 25 4
gpt4 key购买 nike

在我的构建中,我可以通过路由器链接路由到每个组件,但不能通过Menu click()事件路由。
在菜单模板中,我尝试使用以下方法更改路线:
例如,win!.loadURL(“http://localhost:8080/login”),但是在运行构建时,它只是空白(对于任何URL)。
另外,如果我导入路由器并尝试使用router.push(),则在主要过程中,它将导致很多错误,并且也无法正常工作。
但是,如果我使用electron:serve,而不是运行构建,它将运行良好。尽管它从菜单重新加载页面,但与路由器链接不同,它通过路由器链接保留在同一页面并仅更改路由组件。
我需要一个可以同时从菜单和路由器链接更改路由 View 的构建。
因此,当通过调用electron:serve运行开发项目时,如何在Electron菜单中更改SPA的路由并使其在最终版本上运行,因为它可以正常工作?
如何使用 Electron 菜单click()事件更改Vue路线?
完整项目:
https://github.com/danielpm1982/open-weather-client

最佳答案

您无法从Electron主进程内部更改路线或使用Vue-router,因为您也无法从任何Vue组件内部访问Electron菜单以根据登录状态激活/停用子菜单(另一个我怀疑的问题)发布并回答自己)。
Electron 菜单应始终在 Electron 主过程中进行管理。
Vue路线应始终在Electron渲染器过程中进行管理-从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(),而应使用win!将IPC调用发送至渲染器端,在本例中为App.vue组件。例如,webContents.send(“changeRouteTo”,“/”)。 “changeRouteTo”是一个自定义 channel 名称,“/”是路由器在渲染器端从Vue组件内部将路由更改为的路径-对于“/”,它是“本地”路由。要更改为“登录”路由,路径将为“/login”,依此类推……根据router.ts的配置。在渲染器端,在本例中为App.vue组件,它为“changeRouteTo” channel 或事件设置了IPC渲染器监听器,并且每次它从主进程接收到路由更改请求时,都设置为this。从该组件内部使用router.push()将路由更改为相应的路由。
这对于开发环境和非开发环境均适用,在使用npm run electronic:build并创建 bundle 包之后,使用npm run electronic:serve运行项目时,对于最终的构建执行,对于最终的构建执行而言。
希望此解决方案对其他人有用。
在此处查看完整的最终项目,这是一个非常不错的示例应用程序:
https://github.com/danielpm1982/open-weather-client

关于vue.js - 如何使用 Electron 菜单click()事件更改Vue路线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64475172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com