vue router.push：TypeError：onComplete不是函数

艾莉·萨迪琴（Allie Syadiqin）

多年使用CodeIgniter之后，我对VueJS + Laravel还是陌生的，并试图了解Laravel + VueJS是如何工作的。无论如何，我得到了一个运行有Vue加载层包的测试页，该包在onClick事件上触发了加载叠加层，该事件使用router.push加载了新页面。我阅读了文档，其中有2个其他参数。用于router.push的onComplete和onAbort，并提出了以下方法。一切正常，除了控制台出现错误。

控制台错误

[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（）。

感谢您的帮助或提示。

阿比舍克·古普塔

.push期望功能的第二个参数，您传递的是

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

返回整数，如您在此处所读：https : //developer.mozilla.org/zh-CN/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)
        )
    })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。