Question

在使用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（）即可正确显示加载叠加层。

感谢您的帮助或提示。

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)
        )
    })
}

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

1 个答案: