Question

虽然我被路由到'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')
}

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（）和parent（）的父运行首先。
正在呈现父模板，这意味着创建子组件
所以现在孩子们的beforeCreate（）和created（）挂钩分别执行。
这些子组件安装到DOM元素，调用它们的beforeMount（）和mounted（）钩子
然后，在父模板完成之后，可以将父服务器挂载到DOM，最后调用父服务器的beforeMount（）和mounted（）挂钩。

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

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

2 个答案: