Vue Single page app Router, 경로 변경 시 컴포넌트는 어떻게 됩니까?
기본 경로인 FirstPage라는 컴포넌트가 있다고 가정해 보겠습니다.FirstPage는 vuex 스토어의 액션을 사용하여 비동기 호출을 1분마다 백엔드 API로 트리거합니다(컴포넌트가 루트로 로드될 때 트리거됨). 이제 About Component is FirstPage로 이동하는 루트로 이동합니다.아직도 전화하고 있나?
편집:
저는 아직 앱 개발을 하지 않았기 때문에 예를 들어 드릴 수 없습니다.
라우터의 이러한 경우의 동작을 아는 것이 중요합니다.루트를 변경할 때마다 (필요가 없기 때문에) 상시 콜을 정지하고 싶기 때문입니다.
그 이유는 이에 따라서는 마음에 두고 있는 프로젝트의 툴링을 변경해야 하기 때문입니다.
일반적으로 컴포넌트 인스턴스는 컴포넌트에서 벗어나면 삭제됩니다.하지만 여기에는 두 가지 예외가 있습니다.
1) 파라미터가 있는 루트를 사용하는 경우.Vue Router 문서에서
파라미터가 있는 루트를 사용할 때 주의할 점은 사용자가 다음에서 네비게이트할 때
/user/foo
로./user/bar
는 동일한 컴포넌트인스턴스가 재사용됩니다.두 루트 모두 동일한 컴포넌트를 렌더링하기 때문에 오래된 인스턴스를 삭제하고 새 인스턴스를 작성하는 것보다 효율적입니다.그러나 이는 컴포넌트의 라이프 사이클 후크가 호출되지 않음을 의미하기도 합니다.
2) 포장할 때router-view
내구성요소keep-alive
요소.<router-view>는 기본적으로 동적 컴포넌트이기 때문입니다.
일반적으로 Vue는 컴포넌트가 파괴되었을 때 컴포넌트의 인스턴스(instance)를 청소하고 하우스키핑을 매우 잘합니다.그러나 특히 외부 라이브러리를 사용하는 경우 수동 청소가 필요할 수 있습니다.이것은, 통상, 로 처리됩니다.beforeDestroy
인스턴스의 라이프 사이클 후크입니다.
통상적인 상황에서는 해당 컴포넌트 내에서 작성된 논리/스크립트 등은 파기/폐쇄 후크(vue와 관련된 것뿐만 아니라 다른 많은 툴에서 볼 수 있음)에서 "퍼지"됩니다.만약 무언가를 유지할 필요가 있다면 더 높은 범위(또는 다른 솔루션)에 있어야 합니다.
각 구성요소에 대해 작성된 스크립트는 구성요소가 페이지에 렌더링된 경우에만 실행됩니다.이전 컴포넌트를 대체하는 컴포넌트에 대해 설명하면 이전 스크립트는 실행되지 않습니다.
항상 로드하고 싶은 라우터 뷰를 가진 부모 컴포넌트를 페이지 안에 만들 수 있습니다.즉, FirstPage 컴포넌트는 그 뒤에 논리만 있고 html은 없습니다.그렇지 않으면 항상 렌더링된 컴포넌트를 볼 수 있기 때문입니다.실제 html 등을 표시하는 페이지를 라우터로 표시합니다.이해하시길 바랍니다. 그렇지 않다면 제가 예를 들어 드릴 수 있습니다.행운을 빌어요.
언급URL : https://stackoverflow.com/questions/52775039/vue-single-page-app-router-what-happens-with-the-components-when-we-change-rout
'programing' 카테고리의 다른 글
외부 URL 열기 (0) | 2022.08.03 |
---|---|
모키토 사용시verify()? (0) | 2022.08.03 |
vue Enter 전환이 제대로 작동하지 않음 (0) | 2022.08.03 |
Vue에서 전자 이벤트를 사용할 때 __dirname이 정의되지 않은 수정 방법은 무엇입니까? (0) | 2022.08.03 |
Vue JS에서 키보드 이벤트를 동적으로 할당하는 방법 (0) | 2022.08.03 |