vue-routerやnuxt.jsのqueryでの遷移で再レンダーが走らない時の対処法

More than 1 year has passed since last update.


下記の様なリンクを作ったときに再レンダーしない時の対処法

<router-link :to="{path: hoge, query: {name: `${fuga}`}}">

{{ fuga }}へ
</router-link>


vue-routerの場合

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

とすると良いらしい。


nuxt.jsの場合

layoutディレクトリの<nuxt />に設定する


default.vue

<template>

<nuxt :nuxt-child-key="$route.fullPath" />
</template>

nuxtで動的ページ扱いにすればいい話なんだけど、検索クエリでも再レンダーしたくて困ったけど解決できた。