Vue.js 如何在Vue应用程序中先执行父生命周期挂钩，再执行子生命周期挂钩？

我们有以下父组件（

App.vue

）

Dashboard.vue

在

App.vue

的

路由器视图中呈现，路由为
/

现在，我们希望始终首先运行
App.vue
创建的钩子，但它看起来像是
Dashboard.vue
尝试在
App.vue
之前运行其创建的钩子，因此失败，因为它使用了在父级中获取的
psref

解决这一问题的方法是什么，或者是一种正确的实现方法，以便始终首先获取用户登录信息，存储在Vuex中，然后子组件可以使用它？
通常，每当您的子组件运行一个依赖于父操作或挂载生命周期挂钩的挂载（），您可以通过在子组件上放置v-if来避免预先加载。一旦你的父母完成了任务，你只需将一个变量切换到true，然后你的孩子就会被加载，这样你就可以避免空值或空值。
问题是我们在两个组件中都使用
创建的
钩子，而不是
挂载的
钩子。根据本文，创建的父钩子在子钩子之前执行。由于我们是通过父级存储用户数据的，在我们使用
…mapState
之后，它是否应该对子级可用？它会预先运行，但因为它是
异步的
，这并不意味着它会在子级运行其
创建的
钩子之前完成。关于这个主题有一个完整的讨论。有人建议，
async created（）
可以工作，但我还没有尝试过，我也不确定应用程序的结构是否应该是这样。有趣的讨论是，我们实际上有一些
async created（）
在单元测试后工作正常，但在这种情况下它不工作。我们尝试了您建议的
v-if
解决方案，方法是在父对象完成工作后存储一个登录布尔值，然后在子对象中映射该布尔值并使用它，但子钩子似乎在父对象结束之前运行
<template>
  <b-container
    id="app"
    fluid
    class="px-0"
  >
    <b-row no-gutters>
      <side-bar :routes="routes"/>
      <b-col>
        <notifications position='top center' />
        <user-info :routes="routes"/>
        <b-row no-gutters class="router-view">
          <b-col>
              <router-view/>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import UserInfo from './views/navbar/UserInfo'
import SideBar from './views/sidebar/SideBar'
import AuthService from '@/services/auth.service'
import NotificationsService from '@/services/notifications.service'

export default {
  name: 'App',
  components: { UserInfo, SideBar },
  data () {
    return {
      routes: [
        { name: 'app.dashboard', params: {}, icon: 'home', text: 'Dashboard' },
        { name: 'app.jobs', params: {}, icon: 'briefcase', text: 'Jobs' },
        { name: 'app.firms', params: {}, icon: 'th-large', text: 'Firms' }
        // { name: '#', params: {}, icon: 'user', text: 'People' },
        // { name: '#', params: {}, icon: 'gavel', text: 'Bids' },
        // { name: '#', params: {}, icon: 'users', text: 'MF People' },
        // { name: '#', params: {}, icon: 'chart-bar', text: 'Reports' }
      ]
    }
  },
  created () {
    this.loginOnLoad()
  },
  methods: {
    async loginOnLoad () {
      this.authService = new AuthService()
      let user = this.authService.sso()
      if (!user) {
        this.loginFailed = true
        await this.login()
        await this.authService.assignAccessTokenToHeader()
        NotificationsService.successNotification('Logged in successfully')
      } else {
        await this.authService.assignAccessTokenToHeader()
        NotificationsService.successNotification('Welcome Back')
      }
    }
  }
}
</script>

<style>

</style>

<template>
  <div>
    <b-row class="border-bottom" no-gutters>
      <b-col sm="12" class="px-4 py-3">
        <h3 class="text-uppercase">Dashboard</h3>
        <h5 class="font-weight-normal text-secondary mb-0">Personalised Favourites</h5>
      </b-col>
    </b-row>
    <b-row no-gutters>
      <b-col>

        <b-row no-gutters>
          <b-col sm="6">
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>

        <b-row no-gutters>
          <b-col sm="6">
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>

        <b-row no-gutters>
          <b-col>
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>

        <b-row no-gutters>
          <b-col>
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>
<!--        <b-card title="Bids" class="d-inline-flex w-25">-->

<!--        </b-card>-->
<!--        <b-card title="Jobs" class="d-inline-flex w-50">-->

<!--        </b-card>-->
<!--        <b-card title="People" class="d-inline-flex w-50">-->

<!--        </b-card>-->
      </b-col>
    </b-row>
  </div>
</template>

<script>
import AppService from '@/services/app.service'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  created () {
    this.loadGridAndContent(this.userDetails.psref)
  },
  computed: {
    ...mapState({
      userDetails: state => state.auth.user
    })
  },
  methods: {
    async loadGridAndContent (psRef) {
      let data = await AppService.loadDashboard(psRef)
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>