Vuejs: 킵 얼라이브를 사용한 자 라우터 표시 컴포넌트의 라이프 사이클 후크

Vuejs: 킵 얼라이브를 사용한 자 라우터 표시 컴포넌트의 라이프 사이클 후크

명확한 이해를 위해 보다 일반적인 방법으로 문제를 설명하겠습니다.여기 jsFiddle이 있습니다.

2개의 주요 루트가 있으며 이 루트는 2개의 다른 컴포넌트를 나타내고 있습니다.router-view

• Route-1을 클릭하면 경로는 '/route-1'입니다.

• Route-2 클릭 시 경로는 '/route-2/sub-route-a'입니다.

Route-2에는 다른 Route-2가 포함되어 있습니다.router-view다음 2개의 서브루트가 표시됩니다.

• 서브루트

• 서브루트 b

[ Route - 2 ]를 클릭하면 루트2의 컴포넌트가 열리고 서브루트가 사전에 오픈되어 있습니다.router-view

Route-2 내의 메인라우터 뷰와 라우터 뷰는 모두 내부로 랩되어 있습니다.keep-alive캐시되도록 태그를 지정합니다.

캐싱 및 모든 것이 예상대로 정상적으로 작동합니다.

모든 라이프 사이클 훅을 추가하고 console.log를 사용하여 어떤 훅이 호출되는지 확인했습니다.

• 예상대로 모든 컴포넌트에 대해 처음으로beforeCreate(),created(),beforeMount(),mounted()후크가 호출됩니다.

• 라우터 뷰가 아래에 있기 때문에keep-alive요소를 더하다activated()후크는 또한 불리고 있다.

• Route-1과 Route-2 사이를 오갈 때마다activated()그리고.deactivated()훅은 각 컴포넌트에 대해 각각 입력 및 탈퇴 시 호출됩니다.

내 문제가 여기 있다

• Route-2를 클릭하면 루트2의 컴포넌트가 열리고 서브루트가 사전에 오픈되어 있기 때문에router-view서브루트의 모든 라이프 사이클 훅 컴포넌트는 1회만 호출됩니다.

• 1번 도로로 돌아가면 deactivated()sub-route-a의 훅은 호출되지 않습니다.

• sub-route-a와 sub-route-b를 전환할 때만activated()그리고.deactivated()이들 컴포넌트의 훅은

• 루트 2의 후속 입력 시 activated()루트 2의 훅은 호출되지만 서브 루트a의 훅은 호출되지 않습니다.

• sub-route-a를 캐시하고 싶지만 입력할 때마다 변경합니다.라이프 사이클 훅이 최초로 익스트랙트라고 불리지 않기 때문에 코드를 어디에 배치해야 합니까?

• **사용하고 싶지 않다**beforeEnter()

vue 버전을 2.2.0 이상으로 업그레이드합니다.바이올린에는 최신 버전인 2.3.2가 있습니다.로컬 버전은 2.1.0입니다.

2.2.0 이상에서는 활성화 및 비활성화 시 트리 내의 모든 중첩된 구성 요소에 대해 실행됩니다.

여기 https://vuejs.org/v2/api/ #keep-displays

업데이트 방법:npm update --save vue

언급URL : https://stackoverflow.com/questions/43735371/vuejs-lifecycle-hooks-of-child-routerview-components-using-keep-alive