Nuxt.js で多階層の連想配列を URL パラメーターに渡したい

Question

実現したいこと

タイトルの通りですが、Nuxt.js (ver.2) でネストした多階層の連想配列を URL パラメーターにしたいです。

発生している問題・分からないこと

1次元の配列なら this.$router.push({ query: arr }) で問題なく動作しますが、多階層になると値が [object Object] になってしまいます。これを正常にしたいです。parseQuery / stringifyQuery というのを設定すればいいようで、ChatGPT にも助けを求めましたがダメでした。よろしくお願いします。

該当のソースコード

// ChatGPT が吐き出したコード
// midleware/router.js に保存し nuxt.config.js で読み込んでいる

export default function ({ app }) {
  app.router.beforeEach((to, from, next) => {
    // parseQueryの設定
    app.router.options.parseQuery = queryString => {
      const urlSearchParams = new URLSearchParams(queryString);

      // クエリ文字列をパースしてオブジェクトに変換
      const parsed = {};
      urlSearchParams.forEach((value, key) => {
        parsed[key] = value;
      });

      // オブジェクト内の各値に対して変換を適用
      const processValue = value => {
        if (Array.isArray(value)) {
          return value.map(item => processValue(item));
        } else if (typeof value === 'object') {
          return Object.keys(value).reduce((acc, key) => {
            acc[key] = processValue(value[key]);
            return acc;
          }, {});
        }
        return value;
      };

      Object.keys(parsed).forEach(key => {
        parsed[key] = processValue(parsed[key]);
      });

      return parsed;
    };

    // stringifyQueryの設定
    app.router.options.stringifyQuery = queryObject => {
      const urlSearchParams = new URLSearchParams();

      // 再帰的に値を処理する関数
      const processValue = value => {
        if (Array.isArray(value)) {
          return value.map(item => processValue(item));
        } else if (typeof value === 'object') {
          return Object.keys(value).reduce((acc, key) => {
            acc[key] = processValue(value[key]);
            return acc;
          }, {});
        } else if (value === true) {
          return 1;
        } else if (value === false) {
          return 0;
        }
        return value;
      };

      // クエリオブジェクト内の各値に対して変換を適用
      Object.keys(queryObject).forEach(key => {
        const processedValue = processValue(queryObject[key]);
        if (Array.isArray(processedValue)) {
          processedValue.forEach(item => urlSearchParams.append(key, item));
        } else {
          urlSearchParams.set(key, processedValue);
        }
      });

      return urlSearchParams.toString();
    };

    next();
  });
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

arr = { foo:'val1', bar:'val2', baz:'val3' };
// ?foo=val1&bar=val2&baz=val3 に変換される

arr = {
    foo: 'val1'.
    bar: {
       bar2: 'val2_1',
       bar3: 'val2_2'
    },
    baz: [ 0, 2 ]
};
// ?foo=val1&bar=[object Object]&baz=[object Object] になってしまう
// ?foo=val1&bar[bar2]=val2_1&bar[bar3]=val2_2&baz[0]=0&baz[1]=2 になって欲しい

補足

stringify 時に true = 1 / false = 0 に変換するようにしています。

Answer 1

自己解決しました。

• router の stringifyQuery と parseQuery は nuxt.config.js に直接書かねばならない
• ネストした配列をURLパラメーターにするには qs を使う方がラク

// nuxt.config.js

import qs from 'qs';

export default {
    // ...その他の設定
    router: {
        stringifiyQuery: qs.stringify,
        parseQuery: qs.parse,
       ...
    }
};

ただ当方の環境ではなぜか qs が機能せず、仕方なく stringify/parse は自作しました。