Vue Router の動的ルートのパラメータ違いの画面遷移でコンポーネントを再描画してほしい

Category JavaScript / Tagged vue 2021/11/16

問題

パス同じのパラメータ違いのルートでは、コンポーネントが再利用されて、createdなどが発火しない。

/user/123
/user/456
/user/789

パスが変わったときだけでなく、パラメータが変わった時もcreatedしたいな。

router-view に key属性を付与する方法がある。

デフォルトはルートが変わらないと同じコンポーネントが使用される。

key属性を付与すると、key属性が変われば別物として再描画してもらえるので、パラメータやフルパスをkeyに指定することで、コンポーネントは再生成される。created、mounted なども実行される。

・何が変化してもコンポーネントを再生成する場合

<router-view :key="$route.fullPath"></router-view>

・特定のパラメータが変わったときに再生成する場合

<router-view :key="$route.params.id"></router-view>

パラメータの監視は $route や $route.params を watch するのがよくある方法。

負荷が問題にならない規模なら、今回の方法で、コンポーネントを再作成させて created を発火させることができる。