Electronic Menu 클릭() 이벤트를 사용하여 Vue 경로를 변경하려면 어떻게 해야 하는가?
내 빌드에서는 라우터 링크를 통해 각 구성요소로 라우팅할 수 있지만 메뉴 클릭() 이벤트를 통해 라우팅할 수는 없다.
메뉴 템플릿에서 다음을 사용하여 경로를 변경하려고 시도한다.
win!.loadURL("http://localhost:8080/login")은 ex의 경우, 그러나 빌드를 실행할 때는 간단히 공백으로 된다(모든 URL의 경우).
또한 라우터를 가져와서 라우터.push()를 사용하려고 하면 메인 프로세스에서 많은 오류가 발생하게 되고, 또한 작동하지 않는다.
만약 내가 전자:serve를 사용한다면, 빌드를 실행하는 대신에, 그것은 잘 작동한다.비록 그것은 라우터 링크와는 다르게 메뉴에서 페이지를 다시 로드하지만, 라우터 링크와는 다르게, 그것은 동일한 페이지에 유지되고 단순히 경로 구성요소를 변경한다.
라우터 링크에서처럼 메뉴에서 경로 보기를 모두 변경하는 빌드가 필요하다.
그렇다면 어떻게 하면 전자메뉴에서 SPA의 경로를 변경하여 전자:serve를 호출하여 개발 프로젝트를 실행할 때 일종의 효과가 있는 것처럼 최종 빌드로 실행할 수 있을까?
Electronic Menu 클릭() 이벤트를 사용하여 Vue 경로를 변경하려면 어떻게 해야 하는가?
전체 프로젝트:
https://github.com/danielpm1982/open-weather-client
로그인 상태에 따라 하위 메뉴를 활성화/비활성화하기 위해 Vue 구성 요소 내부에서 Electronic Menu에 액세스할 수 없기 때문에(또 다른 의심은 내가 직접 게시하고 응답한 것이다) 경로를 변경하거나 Vue-router를 Electron 메인 프로세스 내부에서 사용할 수 없다.
일렉트로닉 메뉴는 항상 일렉트로닉 메인 프로세스에서 관리되어야 한다.
Vue 루트는 항상 Vue 구성 요소 내부에서 전자 렌더러 프로세스에서 관리되어야 한다.
두 경우 모두 IPC 메시지를 통해 서로 다른 계층에서 이벤트가 생성되므로 적절한 계층에서 해당 항목이 변경되기를 원하며 변경될 것임을 서로 통지하십시오.
메뉴를 변경하는 경우 Vue 구성 요소 내에서 로그인/로그아웃 Vuex 상태를 확인한 다음 구성 요소가 IPC 호출을 주 프로세스에 보내고 하위 메뉴가 활성화 또는 비활성화된다.다음 링크에서 이 솔루션을 참조하십시오.
특정 Vuex 상태에 따라 Vue.js 구성 요소 내부에서 Electron.js 하위 메뉴를 활성화/비활성화하는 방법?
이와 유사한 또 다른 해결책은 이 포스트 문제에 대한 해결책이지만, 다른 방법은 다음과 같다.
경로를 변경하려면 메인 프로세스 측에서 win.loadURL() 또는 win.loadFile()을 사용하는 대신 IPC 호출을 렌더러 쪽, 이 경우 win!을 사용하여 App.vue 구성요소로 전송해야 한다.webContents.send("changeRouteTo", "/" 등)."changeRouteTo"는 사용자 지정 채널 이름이고 "/"는 렌더러 측에서 Vue 구성 요소 내부에서 라우터가 경로를 -로 변경하는 경로로 "/"의 경우 "Home" 경로로 변경된다."로그인" 경로로 변경하는 경우, 경로는 "/로그인" 등이 된다.라우터.ts 구성에 따라렌더러 측에서, App.vue 컴포넌트에서, 이 경우는, 「Change RouteTo」 채널이나 이벤트에 대해서, IPC 렌더러 수신기를 설정하고, 주요 프로세스로부터 노선 변경 요청을 받을 때마다, 그 다음, 이것을 설정한다.본 구성요소 내부에서 해당 통신원 경로로 경로를 변경하기 위해 $175.155를 사용한다.
이는 npm run electron:serve를 사용하여 프로젝트를 실행할 때, npm run electron:build를 호출하고 번들을 만든 후, npm run electron:serve를 사용하여 프로젝트를 실행할 때 개발 환경과 비개발 환경 모두에 적용되어야 한다.
이 해결책이 다른 사람들에게 유용하기를 바란다.
여기 최종 프로젝트 전체를 보십시오. 꽤 괜찮은 샘플 앱입니다.
https://github.com/danielpm1982/open-weather-client
'programing' 카테고리의 다른 글
| RouterLink 특성 읽기 전용 (0) | 2022.03.12 |
|---|---|
| urllib, urllib2, urllib3 및 요청 모듈의 차이점은 무엇인가? (0) | 2022.03.12 |
| 리디렉션 후 구성 요소의 이.props.location에 액세스할 수 없음 (0) | 2022.03.12 |
| "삽입 시 탭 및 공간 사용 제한" (0) | 2022.03.12 |
| 뉴라인 없이 인쇄(인쇄 'a'), 인쇄 공간, 제거 방법? (0) | 2022.03.12 |