Vue Routerのqueryパラメーターの型には気をつけよう

Vue Routeのqueryパラメーターの型の扱いで少し詰まったのでメモ

起こった事象

list.vue

transitionDetail(customers) {
  this.$router.push({
     name: "detail",
     query: { type: customers.type },
   });
},

customers.typeの型はnumber

こういった処理でdetail画面に遷移する関数があるとする。

detailコンポーネントでこのqueryを受け取って条件分岐する処理を書いていた（実際の処理は省略してます）

detail.vue

switch ( this.$route.query.type ) {
   case 1:
     break;
   case 2:
     break;
   case 3:
     break;
   default:
}

ブラウザのリロードを行うと、type=1と指定しているのに、case1の処理が走らなかった

原因調査

デバッグをしていると、以下のことが分かった
・Vue Routerを用いてクライアント側で画面遷移しているときはthis.$router.query.typeの型はnumberで渡ってくる
・ブラウザで更新を行うと、this.$router.query.typeの型はstringで渡ってくる

これが原因で動かなかったので処理を以下に修正

detail.vue

switch ( Number(this.$route.query.type) ) {
   case 1:
     break;
   case 2:
     break;
   case 3:
     break;
   default:
}

うまく行った