vue-router3.0 버전 router.push에 대한 완벽한 솔루션으로 페이지를 새로 고칠 수 없습니다

이번에는 페이지를 새로 고칠 수 없는 vue-router3.0 버전의 완벽한 솔루션을 소개합니다. 주의할 점은 무엇인가요? 함께 살펴보겠습니다. github의 vue-router에서 동일한 문제를 발견했습니다: 버전 3.0.1은 라우터 인스턴스를 통과할 수 없습니다

어제 일부

경로

가 정상적으로 점프할 수 없다는 것을 발견했습니다. 인스턴스화 후 라우터는 this.$router.push를 직접 사용하는 대신 .push입니다. router.push 이후에 URL이 변경되지만 페이지가 새로 고쳐지지 않는 경우 적절한 화면이 나타나기 전에 수동으로 새로 고쳐야 합니다.
package.

json

을 살펴봤습니다. 내 vue와 axios에는 버전 번호가 명시되어 있지 않지만 vue-router에서는 이전에는 작동했지만 지금은 작동하지 않는다는 것이 어떻게 가능합니까? 그런 다음 npm view vue-router를 사용하여 확인했는데 내가 사용하고 있는 버전이 더 이상 package.json의 버전이 아니어서 며칠 전에 npm을 업데이트했을 수도 있다는 결론을 내렸습니다!

(앞으로 함부로 업데이트하지 마세요!)

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

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

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

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

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

장소의

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

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

window.router=router

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

이유 분석:

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

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

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

추천 자료:

Angular 라우팅에서 경로 가드를 사용하는 방법

React가 반응 라우터 라우팅에서 로그인 확인 제어를 구현하는 방법

위 내용은 vue-router3.0 버전 router.push에 대한 완벽한 솔루션으로 페이지를 새로 고칠 수 없습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!