Nuxt.js のasync fetchのqueryパラメータが通常時とリロード時で形が違う

Question

前提・実現したいこと

以下のようなパラメータのリンクがあります
詳細は省きますが
aaは文字列
bbはjson型の配列パラメータとなっています
bb: { k: 0 ,m: 0, w: 0 }

      <nuxt-link
        class="link"
        :to="{path: '/hoge/hage', query: {pram_aa: aa, param_bb: bb}}"
      >テストリンク</nuxt-link>

画面遷移時async fetchでデータを取得すると
以下のqueryにはObjectが入っており、
パラメータのjsonが参照でき、それ行こうの処理で使用可能でした

  async fetch ({ store, error, query, route, from })
  {
    console.log(query);
    〜処理〜
  },

しかしF5リロードすると
console.log(query);は

{ param_aa: 'aa',
  param_bb: '[object Object]'}

となってしまい、param_bbのJsonが参照できません。
urlのパラメータに配列を設定するのがそもそもの間違いなのでしょうか？

希望する挙動

async fetchで、F5リロード時にも
param_bbのjsonの値
bb: { k: 0 ,m: 0, w: 0 }
を参照できるようにしたいです

Answer 1

遷移先のURLパラメーターは?pram_aa=a&param_bb=%5Bobject%20Object%5Dとなっていませんか？
ルーター遷移の際はNuxtで親切に値を引き受けてるようですが、リロード時は素直にURLのクエリを評価するので[object Object]となります。
それぞれ別のクエリとして投げたほうが安全ですが、どうしてもURLパラメーターにObjectを渡したいというのであれば一度文字列にエンコードし、引き取った際にデコードする必要があります。

<template>
  <div>
    <!-- 素直なパターン -->
    <n-link
      :to="{
        path: '/hoge/',
        query: { k: bb.k, m: bb.m, m: bb.w }
       }"
    ></n-link>
    <!-- Objectにこだわるパターン -->
    <n-link
      :to="{
        path: '/hoge/',
        query: { param_bb: stringify(param_bb) }
       }"
    ></n-link>
  </div>
</template>

<script>
export default {
  methods: {
    stringify(value) {
      return JSON.stringify(value)
    }
  },
  // Objectを引取った際のデコード処理
  fetch({ query }) {
    const param_bb = JSON.parse(query.param_bb)
  }
}
</script>

Comments

[ms5025]

うわ。。ありがとうございます。
知りたかったことがズバリ回答していただけて、
感謝しています！！
＞遷移先のURLパラメーターは?pram_aa=a&param_bb=%5Bobject%20Object%5Dとなっていませんか？
なっています！

ルーター遷移の場合はNuxtが親切心でやってくれてるだけだったのですね・・・。
ちなみに通常fetchの場合、Nuxtがやってくれてるので
JSON.parse(query.param_bb)ではエラーが出てしまいました。

Objectかどうか、という判定で逃れる判定をしてみましたが
if文にも入ってきません

if (Object.prototype.toString.call( query.param_bb ) === "[object Object]")
{

query.param_bb = JSON.parse(query.param_bb);
}

この判定方法では回避できないのでしょうか。
質問重ね重ねすいません。

[ms5025]

Unexpected token o in JSON at position 1
と出ますので、
でやはりparseできないです・・

[nt4c]

nuxt-linkに設定しているオブジェクトを一律で文字列に変換していますか？文字列で送った場合はNuxtでも自動で変換はしてくれないと思うので全てデコードする必要があります。

[ms5025]

そうなんですね！
ありがとうございます！！
試してみます！！