在显示加载屏幕 VueJS 之前等待一段时间答案

【问题标题】：Wait for some time before showing loading screen VueJS在显示加载屏幕 VueJS 之前等待一段时间
【发布时间】：2019-11-02 14:06:53
【问题描述】：

在 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 然后加载器出现然后突然隐藏并加载页面。

我想把它做得更好，有什么建议吗？

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

我认为您不了解 Vue Router Navigation Guards。根据Vue Router Docs：

每当触发导航时，按创建顺序调用守卫之前的全局。守卫可能会被异步解析，并且在所有钩子被解析之前导航被认为是挂起的。

简单来说，只需在beforeEach 中显示加载器即可：

store.commit('loading', true);

然后将其隐藏在afterEach 中：

store.commit('loading', false);

就是这样。

不要在afterEach 中添加setTimeout。

希望它会有所帮助。

【讨论】：

【解决方案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

【讨论】：