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)」というエラーです。
結論から言うと、回避する方法としては次の書き方があります。
現在位置に飛ばす場合と、他のページに遷移させる場合の２パターンご紹介いたします。
・現在位置でリロードする場合
|
1 |
this.$router.go(0); |
・他のページに遷移させる場合
|
1 2 |
this.$router.push({ name: "TestPage"}); this.$router.go(0); |
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)」というエラーが起きたときの対処法についてご紹介いたしました。