等待一段时间，然后再显示加载屏幕 VueJS

Question

在 VueJS中，我将每个路由上的加载器显示为：

router.beforeEach((to, from, next) => {
  store.commit('loading', true);
  next();
})

但是，如果服务器在不到一秒的时间内加载页面，那么显示此请求的加载器看起来很奇怪，只有一秒钟。

我想等待一段时间，让我们说 2 秒或 3 秒，毕竟，如果页面尚未加载，则显示加载器，否则不会。因此，为此，我setTimeout为：

router.beforeEach((to, from, next) => {
  setTimeout(() => {
    store.commit('loading', true);
  }, 500);
  next();
})

现在加载器总是显示永远不会消失，然后我也尝试将语句移动到setTimeout next()但随后页面首先等待500 mili-sec然后加载器出现，然后突然隐藏并加载页面。

我想以更好的方式制作它，有什么建议吗？

Answer 1

我认为您不了解 Vue 路由器导航卫士。根据 Vue 路由器文档：

全局之前，无论何时触发导航，都会按创建顺序调用守卫。可以异步解析守卫，并且在解析所有挂钩之前，导航被视为挂起。

简而言之，只需像您正在做的那样以beforeEach显示加载器：

store.commit('loading', true);

只需将其隐藏在afterEach中，如下所示：

store.commit('loading', false);

就是这样。

不要在afterEach中添加setTimeout。

希望它会有所帮助。

Answer 2

关于

你的问题。截至目前，您仅将提交"加载"突变延迟 500 毫秒。要回答您的问题，您应该执行以下操作：

router.beforeEach((to, from, next) => {
  store.commit('loading', true);
   setTimeout(() => {
    store.commit('loading', false);
   }, 500);
   next();
})

这将延迟提交store.commit('loading', false); 500 毫秒。问题是你真的想错误地延迟组件的加载吗？在这种情况下为什么不使用过渡？

下面是加载下一个路由如何延迟的示例https://codesandbox.io/s/vue-highcharts-demo-nn3uv