質問: Vue Routerで、クエリパラメータから配列をcomponentのpropsに渡す方法を教えてください。 こちらのページで「URL `/search?q=vue` は `{query: 'vue'}` をプロパティとして `SearchUser` コンポーネントに渡します。」という例はありました。 私が知りたいのは、「URL `/search?q[]=10&q[]=20` は `{query: ['10','20']}` をプロパティとして `SearchUser` コンポーネントに渡します。」といった場合の方法です。 よろしくお願いします。
回答: vue-routerのparseQueryオプションとstringifyQueryオプション及びquery-stringモジュールを用いることで実現可能です。 以下のブログ記事にやりたいことをそのまま実現できるサンプルコードがありましたので引用します。このように、`VueRouter`インスタンスを作成する部分で`parseQuery`オプションと`stringifyQuery`を指定します。これらのオプションは、クエリ文字列からオブジェクトへ、またその逆の変換を、自分で指定する関数によってカスタマイズできるものです。 vue-routerのデフォルトの処理では配列の記法に対応していませんので、query-stringモジュールの関数を用いることで配列の記法に対応させた処理を用意して差し替えています。query-stringモジュールの関数に`arrayFormat: 'bracket'`というオプションを渡しているのがポイントです。 引用元: vue-router query stringで配列を扱う - とりあえずphpとか(動作しなそうな部分があったので少し修正しています) ``` import queryString from 'query-string' var router = new VueRouter({ ・・・ parseQuery: (query) => { return queryString.parse(query, { arrayFormat: 'bracket' }) }, stringifyQuery: (params) => { if (0 == Object.keys(params).length) { return '' } else { return '?' + queryString.stringify(params, { arrayFormat: 'bracket' }) } } }) ```