等待一段時間，然后顯示加載屏幕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

所以關於你的問題。 截至目前，您只將提交“加載”突變延遲了500毫秒。 要回答您的問題，您應該執行以下操作：

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

這將延遲提交store.commit('loading', false); 500ms。 問題是您是否真的要錯誤地延遲組件的加載。 在這種情況下，為什么不使用轉換呢？

這是延遲下一條路線加載的示例https://codesandbox.io/s/vue-highcharts-demo-nn3uv

Answer 2

我認為您不了解Vue路由器導航防護。 根據Vue路由器文檔 ：

每當觸發導航時，將按創建順序調用全局警戒。 可以異步解決保護措施，並且在解決所有掛鈎之前將導航視為掛起狀態。

簡而言之，只需在執行操作時在beforeEach顯示加載程序beforeEach ：

store.commit('loading', true);

並將其隱藏在afterEach為：

store.commit('loading', false);

而已。

不要在afterEach添加setTimeout 。

希望它會有所幫助。