父子vue之间的异步生命周期答案

【问题标题】：Asynchronous lifecycle between parent and child vue父子vue之间的异步生命周期
【发布时间】：2017-07-06 22:54:23
【问题描述】：

虽然我被路由到“myFavouritePage”，但在路由到“myFavouritePage”后会打印“嗨，我是孩子”。父组件中是否有一个函数，它在完成后会创建子组件？家长：

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

孩子：

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

【问题讨论】：

'在我的路由之前打印'-我的错。在执行 beforeCreate() 之后，child 中的mounted() 开始执行。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

您可以在组件中使用组件保护并将 vuex 存储导入同一文件。

import store from 'pathto/your/store'

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

【讨论】：

我认为 OP 想知道为什么会出现这种奇怪的行为，孩子 mounted 中的代码在父 beforeCreate 之前执行。
我也想知道。

【解决方案2】：

为了阐明不同生命周期事件的order 是什么，以下是它们发生的顺序：

父级的beforeCreate()和created()先运行。
正在渲染父模板，这意味着子组件已创建
所以现在孩子的 beforeCreate() 和 created() 钩子分别执行。
这些子组件挂载到 DOM 元素，调用它们的 beforeMount() 和mounted() 钩子
只有在父模板完成后，父模板才能挂载到 DOM，所以最后调用父模板的 beforeMount() 和mounted() 钩子。

但是根据我和@Srinival 的建议，您可以使用beforeRouteEnter 来决定是继续渲染还是重定向到其他路线。

【讨论】：