Vue.jsで同一ページでパラメーターが変更されたことを検知する

ページ内でタブを使用している。
タブの内容に対してパラメータを用いて直接アクセスしたいという依頼を受けた。

例）http://hogehoge.com/list?tab=2
仕様：
・例のようにURLにタブを指定するNo（タブの幾つめか）が含まれていればそのアクセス時にそのタブを表示
・タブ遷移時にはURLパラメータを更新してユーザーがパラメータ付きURLをコピーできるようにする

—————-

タブ機能機能はすでに実装していたため、それを改修するため下記を利用した。
[追加した仕様]
１、URLにパラメータが含まれているかの判断と分岐
２、タブ遷移をした場合にURLにパラメータを付与する
３、パラメータが更新されたことを感知する
　　※Vue.jsではページの遷移が行われない場合、コンポーネントが再読み込みされない。
　　　（list → listの同一ページのアクセスとして判断される）
　　　そのため、上記２を実装した状態では、タブをクリックした際にURLに付与したパラメータは更新されるが、ページの中身自体は変わらないということが起こる。

◆１、URLにパラメータが含まれているかの判断と分岐
・パラメータにタブ指定を持っているかを判断する

// URLパラメータにタブの指定がある場合
if(this.$route.query.tab){
　// ?tab=パラメータがある時の処理
} else {
　// ?tab=パラメータが無い時の処理
}

◆２、タブ遷移をした場合にURLにパラメータを付与して移動
・指定した遷移先にパラメータを付けてrouter-linkで移動

<router-link :to="{name:'list', query: {tab: tab.id }}">
 <slot></slot>
</router-link>

※tab.idにはタブを判別する要素が入る
　例であれば、Noでタブを判断しているので1つめ、2つめを表す数字。

◆３、watchでパラメータが更新されたことを感知する

export default {
  watch: {
    $route(to, from) {
      // パラメータの変更を感知したときに行う処理（データの再取得）
    }
  }
};

参考サイト

Qiita

Vue Routerでparamsとqueryの取得方法

https://qiita.com/turmericN/items/b849ebe8313d863855b1

Code Pocket

Vue.jsで「？」から始まるURLのクエリパラメータを設定・取得する方法

https://code-pocket.info/20190629232/

Vue Router

パラメーター変更の検知

https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%8F%E3%82%9A%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5