如何从自定义函数内部调用 vue 路由器

Question

我使用 VueCLI，我在方法中确实有这样的代码：

submitCheck: function () {
function authUser() {
  // returns a promise   
}
function uploadFile() {
  // also returns a promise
}

// ...

if ( error !== null ) {
    EventBus.$emit('showError', error)
} else {
    authUser()
        .then(
            function () {
                return uploadFile();
            })
        .then(
            function (data) {
                EventBus.$emit('loaderStop')
                this.$router.push('/awaiting');
        })
        .catch(function(error) {
            EventBus.$emit('loaderStop')
                console.log(error)
        })
}

我想要实现的是，如果所有承诺都已解决，则路由到/等待，但由于我在匿名函数中使用它，因此它没有路由器。我相信很多编码人员都遇到过这样的问题，需要从函数内部进行路由。怎么做？

卡尔雷格

Answer 1

多种处理方法，我建议您使用箭头函数并了解它们与其他函数样式的区别。

明确一点：替换

function (data) {
    EventBus.$emit('loaderStop')
    this.$router.push('/awaiting');
}

和

data => {
    EventBus.$emit('loaderStop');
    this.$router.push('/awaiting');
}

Answer 2

你的问题上下文不够清楚。如果代码在指数方法中执行，则可以使用箭头函数，如 (agrs,...) => {...}。否则，如果不是这种情况，您可以像 (function() {}).bind(this) 一样使用 bind function。或者只是在您的代码模块中导入 $router 。

希望对您有所帮助。

Answer 3

Sandro 和 Xhua 的回答很完美。我只想解释一下，为什么会出现错误：

问题是"this."。它指的是父对象。所以在你的情况下 "this." 指的是 authUser 对象而不是 Vue。为了您的理解：您可以在 authUser 对象之外定义 "var that = this"，然后在内部使用“that.”。或者你寻求更复杂的解决方案。

如何从自定义函数内部调用 vue 路由器

how to call vue router from inside custom function

javascript

router

vue.js