Question

在 VueJS 中，我将每条路线上的装载机显示为：

Capabilities  DeviceID            SerialNumber      Bootable
{3, 4}        \\.\PHYSICALDRIVE0  NXXXXXXXXK4R2DT   True
{3, 4, 7}     \\.\PHYSICALDRIVE1  S0NFJNXXXXXXXX

但是，如果服务器在不到一秒的时间内加载页面，那么仅显示一秒钟的请求请求就显得很奇怪。

我想等待一段时间，只说2秒或3秒，毕竟，如果页面尚未加载，则显示loader，否则不显示。因此，我将router.beforeEach((to, from, next) => { store.commit('loading', true); next(); })设为：

setTimeout

现在总是显示加载程序永不消失，然后我也尝试将router.beforeEach((to, from, next) => { setTimeout(() => { store.commit('loading', true); }, 500); next(); })语句移到next()中，但是随后页面首先等待setTimeout，然后加载程序出现，然后突然隐藏和页面加载。

我想以更好的方式做到这一点，有什么建议吗？

Answer 1

关于您的问题。截至目前，您只将提交“加载”突变延迟了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

Answer 2

我认为您不了解Vue路由器导航防护。根据{{3}}：

每当触发导航时，将按创建顺序调用警戒前全局。警卫可以异步解决，在解决所有挂钩之前，导航被视为挂起。

简而言之，只需在执行操作时在beforeEach中显示加载程序即可：

store.commit('loading', true);

然后将其隐藏在afterEach中为：

store.commit('loading', false);

就是这样。

请勿在{{1}}中添加setTimeout。

希望这会有所帮助。

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

2 个答案: