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

【お知らせ】
プログラミングのコンサルタントをすることを考えております。
下記の通り、かなり格安でご用意させていただいております。
【格安】プログラミングコンサル生募集(初心者向け、フリーランス志望向け)

詳しくは下記のリンクをご覧ください。
https://chico-shikaku.com/2020/10/programming-consult-2020/

11月くらいを目処に開始予定です。
最初は募集があれば先着5名くらいを目安に考えております。
質問や意見、問い合わせやお申し込みは下記のリンクよりお願いいたします。
https://docs.google.com/forms/d/e/1FAIpQLSeTXskmlyPAHuhwiOE9togqJPWdhXYCyRoVnFkkbS0VN0Ftug/viewform?usp=sf_link

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






Vue CLI

Posted by ちこ