在显示加载屏幕 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。

希望它会有所帮助。