vue-router3.0 버전 router.push를 처리하는 방법 페이지를 새로 고칠 수 없습니다

이번에는 페이지 새로 고침이 안되는 vue-router3.0 버전 router.push 처리 방법을 알려드리겠습니다. 다음은 실제 사례를 살펴보겠습니다. 어제 일부

경로

가 정상적으로 점프할 수 없다는 사실을 발견했습니다. 검색한 결과, this.$router.push를 직접 사용하는 대신 인스턴스화 후 router.push가 사용되는 곳이 모두 있다는 것을 알았습니다. router.push 이후에 URL이 변경되지만 페이지가 새로 고쳐지지 않는 경우 적절한 화면이 나타나기 전에 수동으로 새로 고쳐야 합니다.
package.json을 살펴봤습니다. 내 vue와 axios는 버전 번호를 쓰지 않았지만 vue-router는 분명히 작동했지만 지금은 작동하지 않을 수 있습니까?

그런 다음 npm view vue-router를 사용하여 확인한 결과 내가 사용하고 있는 버전이 더 이상 package.json에 있는 버전이 아니어서 며칠 전 내 npm up

date

일지도 모른다는 결론을 내렸습니다! (앞으로 함부로 업데이트하지 마세요!)

새 버전이 왜 작동하지 않는지 정확히 모르겠습니다.

가장 간단한 해결책은 물론 router.push를 this.$router.push

로 직접 변경하는 것입니다. 하지만 이것이 가능하다면 애초에 구성 요소에서 다른 Router를 인스턴스화해야 하는 이유는 무엇입니까?

분명히 이것은 어떤 곳에서는 vue가 아니기 때문에 vue를 인스턴스화한 다음 vue.$router를 사용해도 괜찮습니까?

물론 대답은 '아니요'입니다. 왜냐하면 이 vue와 다른

장소의

vue는 동일 object이어서는 안 되기 때문입니다. 그러면 궁극적인 해결책은 다음과 같습니다.

창에 전역 vue의 라우터를 추가합니다. 즉, main.js에서 사용합니다.

window.router=router

그러면 다른 곳에서는 router.push 등의 라우터 메서드를 사용할 수 있습니다. .

이유 분석:

인스턴스 이후의 라우터가 페이지를 새로 고칠 수 없는 이유는 이것과 동일하지 않기 때문일 것입니다. 이전 버전에서는 $router를 직접 사용할 수 있었습니다. 이렇게 싱글턴을 사용해야 합니다.

더 이상 싱글톤을 사용하지 않는 이유를 어떻게 알 수 있나요?

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

React-Router 경로에서 React의 로그인 인증 제어 단계에 대한 자세한 설명

JS 간단한 계산기 구현 단계에 대한 자세한 설명

위 내용은 vue-router3.0 버전 router.push를 처리하는 방법 페이지를 새로 고칠 수 없습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!