Asynchronous lifecycle between parent and child vue

Question

Though I'm routed to 'myFavouritePage', but 'Hi, I'm child' is getting printed after routing to 'myFavouritePage'. Is there a function in parent, which upon completion creates the child components? Parent:

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

Child:

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

Answer 1

To shed some light on what is the order of different life cycle events, following is the order in which they take place:

• beforeCreate() and created() of the parent run first.
• The the parent's template is being rendered, which means the child components get created
• so now the children's beforeCreate() and created() hooks execute respectively.
• these child components mount to DOM elements, which calls their beforeMount() and mounted() hooks
• and only then, after the parent's template has finished, can the parent be mounted to the DOM, so finally the parent's beforeMount() and mounted() hooks are called.

However for you purpose as suggested by me and @Srinival, you can use beforeRouteEnter to decide whether you want to go ahead with the rendering or want to redirect to other route.