상위 vue와 하위 vue 간의 비동기 라이프사이클

상위 vue와 하위 vue 간의 비동기 라이프사이클

'myFavoritePage'로 전송되었지만 'myFavoritePage'로 전송한 후 'Hi, I'm child'가 출력되고 있습니다.완료 시 부모 컴포넌트를 생성하는 기능이 있습니까?부모:

beforeCreate () {
    var orderNumber = this.$store.state.myStore.order.number
    if (!orderNumber) {
        this.$router.push({name: 'myFavouritePage'})
    }
}

아이:

mounted () {
    cosole.log('Hi, I'm child')
}

구성 요소에서 구성 요소 가드를 사용하고 vuex 저장소를 동일한 파일로 가져올 수 있습니다.

import store from 'pathto/your/store'

beforeRouteEnter(to, from, next) {
 if (!store.state.myStore.order.number) return next({name: 'myFavouritePage'})
 next();
}

다양한 라이프 사이클 이벤트의 순서가 무엇인지를 설명하기 위해, 그 순서가 다음과 같습니다.

• 먼저 부모 실행의 beforeCreate() 및 created()를 지정합니다.
• 상위 템플릿이 렌더링되고 있습니다. 즉, 하위 구성요소가 생성됩니다.
• 이제 자녀들의 beforeCreate()와 created() 후크가 각각 실행됩니다.
• 이러한 자 컴포넌트는 DOM 요소에 마운트되어 BeforeMount() 및 mounted() 후크를 호출합니다.
• 부모 템플릿이 완료된 후에만 부모를 DOM에 마운트할 수 있으므로 마지막으로 부모의 beforeMount() 및 mounted() 후크가 호출됩니다.

단, 저와 @Srinival의 제안대로 RouteEnter를 사용하여 렌더링을 계속할 것인지 다른 루트로 리다이렉트할 것인지를 결정할 수 있습니다.

언급URL : https://stackoverflow.com/questions/42297501/asynchronous-lifecycle-between-parent-and-child-vue