Vue 路由器 afterEach 守卫在加载完成之前执行答案

【问题标题】：Vue router afterEach guard executes before loading has finishedVue 路由器 afterEach 守卫在加载完成之前执行
【发布时间】：2019-03-11 15:16:00
【问题描述】：

我正在尝试在路线之间导航时创建加载动画。但是，只要我单击路由器链接，beforeEach 和 afterEach 防护就会立即同时执行，然后我的组件才会开始加载。

router.beforeEach((to, from, next) => {
   console.log('starting...')
   store.isLoading = true
   next()
})

router.afterEach((to, from) => {
   console.log('finished!!')
   store.isLoading = false
})

new Vue ({
   el: '#app',
   router: router,
});

我对组件创建方法进行了大量计算，它显示导航已完成，但仅在 5 秒后我的组件加载。

export default {
...

  created()
  {
    doPointlessComputationsWithBlocking()
    this.fetchData()
  },
};

单击路由器链接后，控制台日志立即显示。

开始...

完成了！！

【问题讨论】：

如果将router.afterEach() 代码移动到组件的mounted() 会怎样？
您可能需要在组件内使用生命周期挂钩，因为路由发生在组件内的任何逻辑运行之前。

标签： javascript vue.js

【解决方案1】：

  async created()
  {
    doPointlessComputationsWithBlocking()
    await this.fetchData()
  },

【讨论】：

我不推荐这种风格。因为创建的方法应该是同步的而不是异步的如果你喜欢这样，你的应用程序必须有错误的循环