Javascript 在vue路由器中多次单击按钮时未捕获（承诺中）

我正在Rails应用程序中使用vuejs和vue路由器。我有一个按钮，可以调用

nivagate

方法。当用户单击此

navigate

方法时，它会通过

axios

模块点击一个API enpoint，并使用

this.$router.push（{name:“RouteName”}）

移动到下一个组件。问题是，当用户点击此按钮时，控制台中会出现

Uncaught（承诺中）undefined

错误。我猜这个错误是由于vue路由器引起的。 我的问题是，如何捕捉或处理此错误。我在我的应用程序中使用了多个这样的按钮，所以我需要一个通用的解决方案

Home.vue-组件

<template>
  <div>
    <button
      id="select_button"
      @click="onSelectClick"
    >
     Select
    </button>
  </div>
</template>
<script>
  export default {
    onSelectClick() {
      this.$`enter code here`axios.get('some-url').then(res => { 
        //print res on console
      }).catch(err => { 
        // print err on console
      })
      this.$router.push({ name: 'route-name' }); //route-name != home
    }
  }
</script>
<style>
</style>

---

错误原因：vue路由器在调用

this.$router.push（{name:'route name}）

时会导致此错误，而不会完成上一次调用

解决方案：我可以通过在router.push上添加一个catch-guard来处理此错误

this.$router.push({name: 'router-name'}).catch(error => { //handle error here})

我在vue mixin中添加了一个方法，使其成为通用的

import router from '../router'
Vue.mixin({
  methods: {
    navigate(route) {
      router.push(route).catch(err => { //handle error here });
    }
  }
});

现在我可以在这样的组件中使用这个

导航
方法

<template>
</template>
<script>
  export default {
    mounted() {
      this.navigate({name: 'Home'})
    }
  }
</script>
<style>
</style>


导出默认值{
安装的（）{
导航（{name:'Home'}）
}
}

希望它能帮助其他人。
下一步（{name:'Login'}）

导致（承诺中的）未实现

我把它换成了

router.push({name: 'Login'})
return

没有错误
 欢迎来到堆栈溢出！不幸的是，这个问题不够详细，无法为您提供任何有意义的帮助。请编辑您的问题以包含问题的答案，包括示例输入、首选输出和您迄今为止尝试的代码。另外，由于您有错误，请在问题文本中包含完整的错误回溯。@E.Zeytinci感谢您的指导。我添加了导致问题的代码的简化形式。希望能有所帮助。如果这是vue CLI，我可能会建议：@MayraNavarro这不是vue CLI。我正在Rails应用程序中集成vue。也许只有在API回复无误时，您才应该导航到下一条路线？
router.push({name: 'Login'})
return