在 vue.js 中，我可以在哪里放置“应用程序初始化”代码？答案

【问题标题】：In vue.js, where can I place "app initialization" code?在 vue.js 中，我可以在哪里放置“应用程序初始化”代码？
【发布时间】：2019-08-18 11:58:38
【问题描述】：

具体来说，是在应用实际加载之前运行的代码。我正在使用vuex，我想做的第一件事（不管用户在哪条路线上）是调度一个getUser 操作以从API 获取当前用户详细信息（或者，如果未通过身份验证，则重定向） .

如果我把它放在我的App.vuemounted 组件中，我相信可能为时已晚？子组件不会在父组件之前加载吗？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

如果我猜对了，您想在应用程序初始化之前做一些事情。为此，您可以在应用程序初始化中执行 async 方法。像这样的例子：

function initializeApp (vueCreated) {
  return new Promise((resolve, reject) => {
    switch (vueCreated) {
      case false: // "prevue" initialization steps
        console.log('vue not yet created, prevue steps happens')
        // ...
        setTimeout(_ => resolve(), 3500) // async call
        break;
      case true: // we can continue/prepare data for Vue
        console.log('vue created, but waiting for next initialization steps and data')
        // ...
        setTimeout(_ => resolve('Mounted / shown when app ready'), 3500) // async call
      }
  })
}

initializeApp(false).then(_ => {
  new Vue({
    template: '#app',
    data: {
      content: null
    },
    async created () {
      this.content = await initializeApp(true)
      this.$mount('#app')
      console.log('all inicialization steps done, data arrived, vue mounted')
    }
  })
})

我发现一些与您的问题相关的文章可能会对您有所帮助。 Link

【讨论】：

【解决方案2】：

如果您使用vue-router，您可以使用beforeEach 来阻止未经身份验证的用户的某些路由。

您可以阅读更多here。

如果您卡在这里，请提供您尝试使用路由器的代码。

还有good example of using navigation guards。

祝你好运！

【讨论】：

我不明白这是如何回答这个问题的。 beforeEach 运行了很多次，问题是在整个组件第一次打开时运行一些代码。