vue router.push: TypeError: onComplete не является функцией

Question

Я новичок в VueJS + Laravel после нескольких лет использования CodeIgniter и пытаюсь понять, как все работает с Laravel + VueJS.В любом случае, я получил тестовую страницу с пакетом Vue Loading Layer, который запускает оверлей загрузки для события onClick, которое загружает новую страницу с помощью router.push.Я прочитал документацию, что есть 2 дополнительных параметра, т.е.onComplete и onAbort для router.push и придумали следующий метод.Все работает, как ожидалось, за исключением того, что я получаю сообщение об ошибке в консоли.

ошибка консоли

[vue-router] uncaught error during route navigation:
TypeError: onComplete is not a function

метод перехода

goTo(routeName) {
    let self = this
    self.$nextTick( function() {

        // Show Vue Loading Layer
        let loader = this.$loading.show({
            loader: 'spinner',
            color: '#e8b30f',
            backgroundColor: '#000',
            opacity: 0.5,
        })

        // Retrieve new page
        self.$router.push(

            // First param : location
            {name: routeName},

            // Second param : onComplete
            setTimeout(() => loader.hide(), 3 * 1000)
        )
    })
}

Несмотря на то, что я получил ожидаемый результат, я все еще хочу знать, почему эта ошибка появляется на консоли.

Во-вторых, есть ли лучший способ сделать это?Единственная причина, по которой я использовал setTimeout (), заключается в том, что новая страница была загружена слишком быстро, чтобы наложение загрузки отображалось правильно без установки setTimeout ().

Спасибо за любую помощь или советы.

Answer 1

Второй параметр .push ожидает функцию, которую вы передали

setTimeout(() => loader.hide(), 3 * 1000)

, которое возвращает целое число, как вы можете прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Return_value

Чтобы исправить это, вы можете обернуть его внутри функции

() => {
  setTimeout(() => loader.hide(), 3 * 1000)
}

Таким образом, вы goto метод будете выглядеть так:

goTo(routeName) {
    let self = this
    self.$nextTick( function() {

        // Show Vue Loading Layer
        let loader = this.$loading.show({
            loader: 'spinner',
            color: '#e8b30f',
            backgroundColor: '#000',
            opacity: 0.5,
        })

        // Retrieve new page
        self.$router.push(

            // First param : location
            {name: routeName},

            // Second param : onComplete
            () => setTimeout(() => loader.hide(), 3 * 1000)
        )
    })
}