Перенаправление Vue-Router при ошибке в функции props

Question

У меня есть это определение маршрута:

{name: "article", path: "/article/:id", component: Article, props: true}

И этот компонент (я использую Typescript и vue-class-component):

@Component({
    props: {
        id: Number
    }
})
class Article extends Vue {
    id: Number;
}

Конечно, это дает мне это предупредить

[Vue warn]: Invalid prop: type check failed for prop "id". Expected Number, got String.

Поэтому я обновляю свое определение маршрута с помощью функции реквизита

name: "article", 
path: "/article/:id", 
component: Article, 
props:(route:Route) => {
    const id = parseInt(route.params.id);

    if(isNaN(id))
        throw new Error("id param should be a number")

    return {id}
}

Это работает, но я не могу найти, как перенаправить пользователя на определенную страницу, если он дал мне "плохое" значение для параметра id (например, "/article/toto")

router.onError, кажется, здесь не работает

Навигационные охранники, где можно использовать следующий (ошибка), не могут изменять параметры / реквизиты

У кого-нибудь есть идеи?

Answer 1

Все значения в параметрах URL имеют type String,

В вашем компоненте установите часы для этого конкретного свойства

props : ["id"],
watch : {
    id(current,previous){
      var reg = /^\d+$/;
      if(reg.test(current)){
        console.log("its a number");
      }
      else{
        console.log("its not a number");
        this.$router.push("/error"); //HomeComponent or ErrorComponent
      }
    }
  }

Теперь, когда часы настроены, вы можете проверить, имеет ли ваше текущее значение в prop тип Number или String, используя Regex.

if currentValue is Number then 
    GoAhead
if currentValue is NAN then 
    Redirect to HomeComponent or ErrorComponent