this.$router.goで「Argument of type ‘{ path: string; force: boolean; }’ is not assignable」

2020年7月10日

今回はVue.js+TypeScript環境を使って開発を行っているときに、「Argument of type '{ path: string; force: boolean; }’ is not assignable to parameter of type 'number’.Vetur(2345)」というエラーが起きたときの対処法についてご紹介いたします。

this.$router.goで「Argument of type '{ path: string; force: boolean; }’ is not assignable」

this.$router.goは一般的にはnumberを渡してhistoryスタックの中でどのくらいステップを進めるか、もしくは戻るのかを定義することができます。
this.$router.goを使うことで画面のリロードも行えるのが魅力ですね。

一方で、Object型を渡すことで、特定のパスにリロードをしながら遷移することもできます。
下記のような使い方です。下記の例では、現在位置にリロードをしながらページを飛ばしています。
this.$router.go({path: this.$router.currentRoute.path, force: true})

しかし上記ではnumber型ではなくObject型を渡しているので、TypeScript環境ではエラーが起きます。
「Argument of type '{ path: string; force: boolean; }’ is not assignable to parameter of type 'number’.Vetur(2345)」というエラーです。

結論から言うと、回避する方法としては次の書き方があります。
現在位置に飛ばす場合と、他のページに遷移させる場合の２パターンご紹介いたします。

・現在位置でリロードする場合

・他のページに遷移させる場合

this.$router.goに0を渡すことによって、現在位置でリロードさせることができます。
さらに、this.$router.pushと組み合わせることで、他のページに遷移させてなおかつリロードさせることができます。

ぜひお試しください。

終わりに

今回はVue.js+TypeScript環境を使って開発を行っているときに、「Argument of type '{ path: string; force: boolean; }’ is not assignable to parameter of type 'number’.Vetur(2345)」というエラーが起きたときの対処法についてご紹介いたしました。