【Vue.js】Vue.jsの3系バージョンアップでVueRouter.push()の定義が変わっていた

2019年9月17日2019年9月20日

フレームワークのバージョンアップによって、昔書いていた方法が通用しなくなるのは良くあることですね。今回はVue.jsがバージョン3.1.2になったことで、私がVue.js2系で書いていた方法で画面遷移ができなくなったお話です。

バージョン情報

Vue.js

2.6.10から3.1.2へのバージョンアップ

※Typescript使用しています

画面遷移に使用していたメソッドpushでエラーが出るように…

以前作成していたアプリでは画面遷移（Pageコンポーネントの入れ替え）にpush関数を使用しており以下のように記載していました。

# Homeコンポーネントを表示する
public moveToHome() {
    this.$router.push("home");
}

以前はこの記載で問題なく遷移できていたのですが、Vue.js3系になったことで「NavigationDuplicated」が返却されるようになりました。

そして以下にように記載すれば動くようになりました。

public moveToHome() {
    # 無名関数を2つ引数に追加する
    this.$router.push("home", () => {}, () => {});
}

以前はルーティング先のパスを文字列で与えればよかったのが、無名関数が必要となりました。

原因

このようになったのはVueRouterのpushメソッドがオーバーロードされたためです。

バージョン2.6.10では以下にような定義となっていた。

export declare class VueRouter {
  # push以外のメソッドは省略
  push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void;
}

バージョン3.1.2では以下にような定義となっていた。

export declare class VueRouter {
  # push以外のメソッドは省略
  push(location: RawLocation): Promise<Route> # 追加された
  push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): void;
}

メソッドが追加されたことで、文字列のみを引数に渡すとPromise<Route>が返却されエラーとなったようです。

エラーの内容がぐぐっても全然出てこず、地味に解消に時間がかかりました…。皆様もお気をつけください。