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

今回は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)」というエラーです。

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

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

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

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)」というエラーが起きたときの対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vue CLI

Posted by ちこ