在显示加载屏幕 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();

})

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

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

Answer 1

我认为您不了解 Vue Router Navigation Guards。根据Vue Router Docs：每当触发导航时，按创建顺序调用全局 before 守卫。Guards 可能会被异步解析，并且在所有钩子被解析之前导航被认为是挂起的。简而言之，只需在beforeEach您正在执行的操作中显示加载程序：store.commit('loading', true);并将其隐藏afterEach为：store.commit('loading', false);就是这样。不要加setTimeout进去afterEach。希望它会有所帮助。