Проблемы с работой preloader vue.js

Question

Я пытаюсь показать предварительный загрузчик при переходе от одного компонента к другому. Я использую этот preloader . Я создаю файл loader.js и пишу туда:

import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.use(Loading);

let loader = Vue.$loading.show({
    loader: 'dots',
    color: '#5D00FF',
    zIndex: 999,
}); 
function loaderStart() {
    loader;
}
function loaderEnd() {
    loader.hide();
}

export default {loaderStart, loaderEnd}

loader,js я импортирую в index.js и там пишу, когда хочу вызвать запуск загрузчика, но он не запускается (без if в beforeResolve preloader работает). Вот index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Authorization from '@/components/Authorization'
import Main from '@/components/Main'
import loader from './loader'

Vue.use(Router)

const router = new Router({
    routes: [
    {
        path: '/',
        name: 'Main',
        component: Main,
    },
    {
        path: '/authorization',
        name: 'Authorization',
        component: Authorization
    }
  ]
})
router.beforeResolve((to, from, next) => {
    if(to.path) {
        loader.loaderStart()
    }
    next()
});
router.afterEach((to, from) => {
    loader.loaderEnd()
});
export default router;

Пожалуйста, помогите мне найти проблему

Answer 1

1. Ваш текущий loader появится только один раз, потому что вы также вызывали метод show один раз.Вам нужно вызывать метод show каждый вызов loaderStart и сохранять загрузчик:

   let loader = null;
   function loaderStart() {
       // it would be better to extract these values as constants 
       loader = Vue.$loading.show({
            loader: 'dots',
            color: '#5D00FF',
            zIndex: 999,
       }); 
   }
   function loaderEnd() {
       loader.hide();
   }
   

2. Возможно, у вас есть некоторые асинхронные компоненты, так как вы добавили загрузчик в логику маршрутизации, поэтому вам следуетиспользуйте хук beforeEach вместо beforeResolve.

   router.beforeEach((to, from, next) => {
       loader.loaderStart()
       next()
   });
   router.afterEach((to, from) => {
      loader.loaderEnd()
   });
   

Документы API загрузчика (show метод)

Vue-роутер охранников

Vue-роутер навигационный поток