parent 和 child vue 之间的异步生命周期

Question

虽然我被路由到 'myFavouritePage'，但是“嗨，我是 child”在路由到 'myFavouritePage' 之后会被打印出来。 parent 中是否有函数完成后创建 child 组件？ 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

您可以在您的组件中使用组件守卫，并将 vuex 存储导入同一文件。

import store from 'pathto/your/store'

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

Answer 2

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

beforeCreate() and created() of the parent 运行 first.
正在呈现 parent 的模板，这意味着 child 组件已创建
现在 children 的 beforeCreate() 和 created() 挂钩分别执行。
这些 child 组件挂载到 DOM 元素，调用它们的 beforeMount() 和 mounted() 钩子
只有这样，parent的模板完成后，parent才能挂载到DOM，所以最后是parent的beforeMount () 和 mounted() 钩子被调用。

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

parent 和 child vue 之间的异步生命周期

Asynchronous lifecycle between parent and child vue

vue.js

vue-router

vue-component

vuejs2