Uncauched (в обещании) в vue -рутер при нескольких нажатиях на кнопку

Question

Я работаю с vuejs и vue -router в приложении Rails. У меня есть кнопка, которая вызывает метод nivagate. Когда пользователь нажимает на этот метод navigate, он достигает точки API через модуль axios и переходит к следующему компоненту, используя this.$router.push({name: "RouteName"}). Проблема в том, что когда пользователь нажимает несколько раз на эту кнопку, в консоли выдается ошибка Uncaught (in promise) undefined. Я предполагаю, что эта ошибка возникает из-за vue -router. У меня вопрос, как я могу поймать или обработать эту ошибку. Я использую несколько таких кнопок в своем приложении, поэтому мне нужно универсальное c решение.

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>

Ошибка при двойном (или более) нажатии на кнопку

Uncaught (in promise) undefined

Answer 1

Причина ошибки: vue -рутер вызывает эту ошибку, когда мы вызываем this.$router.push({name: 'route-name'}) несколько раз подряд без завершения предыдущего вызова.

Решение: Я могу справиться с этой ошибкой, добавив перехватчик на router.pu sh.

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

Я сделал его обобщенным c, добавив метод в vue mixin.

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

Теперь я могу использовать этот navigate метод в моих компонентах следующим образом.

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

Надеюсь, он поможет другим.