Question

在路线之间导航时，我试图创建加载动画。但是，当我单击路由器链接时，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()
  },
};

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

开始...

完成！

Answer 1

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

Vue路由器之后每个警卫在加载完成之前执行

1 个答案: