同じページ内への繊維では、クエリーパラメータだけ変えても再レンダリングが走らずデータが更新されません。
例えば、URLが/data?page=1のページで、this.$router.push({ path: “/data”, query: { page: “2” })を実行するだけでは再レンダリングが走らず、URLだけ変更されてデータは更新されません。
このような場合にURL変更に合わせてデータを変更する方法について書いてきます。
目次
データ更新は個別に実装する必要がある
pageというクエリーパラメータがあるデータのページネーションを例に考えてみます。
ページを次に進める場合、以下のような処理を書くと思います。
これだけだとURLだけ変更されてデータは更新されません。
this.$router.push({
query: { page: `${this.page + 1}`
})以下の実装のように、URLの変更に合わせてデータを更新することで解決できます。
NuxtではbeforeRouteUpdateというナビゲーションガードがあります。この関数は次ページにルーティングが変わる前に呼ばれます。
beforeRouteUpdateで遷移先であるtoからクエリパラメータを取得し、そのデータに合わせてデータ更新をすることで、URLが変わったときにデータも併せて更新されるようになります。
export default Vue.extend({
...
beforeRouteUpdate(to, _from, next) {
// ルーティング変更前に遷移先クエリパラメータを取得
this.page = Number(to.query.page) // 変更されたクエリーパラメータ取得
// クエリだけ変更してもページの再レンダリングは走らないので、
// 変更検知して再度クライアント側でデータを更新する
this.fetchData() // データ更新
next()
}
...asyncDataなどでサーバーサイドでpre-renderingされてる場合は？
asyncDataでpre-renderingされる場合も同様で、クエリパラメータだけ変更されても再レンダリングされず、データも更新されません。
この場合、asyncDataに加えてdataでもstateを定義して、beforeRouteUpdateを使って先ほどと同様のクライアント側処理を実装する必要があります。
nuxtの勉強用で作った私のリポジトリが参考になるかもしれません。
https://github.com/pei223/nuxt-post-app-sample/blob/master/pages/posts/index.vue