SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...

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

問題

パス同じのパラメータ違いのルートでは、コンポーネントが再利用されて、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 するのがよくある方法。

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

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

https://github.com/vuejs/vue-router/issues/474

関連するメモ

コメント