52833


Vue Routerで、クエリパラメータから配列をcomponentのpropsに渡す方法を教えてください。  
[こちらのページ](https://router.vuejs.org/ja/guide/essentials/passing-
props.html#function-%E3%83%A2%E3%83%BC%E3%83%89)で「URL `/search?q=vue` は
`{query: 'vue'}` をプロパティとして `SearchUser` コンポーネントに渡します。」という例はありました。  
私が知りたいのは、「URL `/search?q[]=10&q[]=20` は `{query: ['10','20']}` をプロパティとして
`SearchUser` コンポーネントに渡します。」といった場合の方法です。  
よろしくお願いします。


CC BY-SA 4.0
2019-02-17T11:42:22.317
52829
2019-02-17T16:29:45.127
13492
question
vue.js
Vue Router クエリパラから配列をcomponentのpropsに渡す方法


vue-
routerの[parseQueryオプションとstringifyQueryオプション](https://router.vuejs.org/ja/api/#parsequery-
stringifyquery)及び[query-stringモジュール](https://www.npmjs.com/package/query-
string)を用いることで実現可能です。

以下のブログ記事にやりたいことをそのまま実現できるサンプルコードがありましたので引用します。このように、`VueRouter`インスタンスを作成する部分で`parseQuery`オプションと`stringifyQuery`を指定します。これらのオプションは、クエリ文字列からオブジェクトへ、またその逆の変換を、自分で指定する関数によってカスタマイズできるものです。

vue-routerのデフォルトの処理では配列の記法に対応していませんので、query-
stringモジュールの関数を用いることで配列の記法に対応させた処理を用意して差し替えています。query-
stringモジュールの関数に`arrayFormat: 'bracket'`というオプションを渡しているのがポイントです。

引用元: [vue-router query stringで配列を扱う -
とりあえずphpとか](http://kimagureneet.hatenablog.com/entry/2018/04/22/224623)（動作しなそうな部分があったので少し修正しています）

[code]

    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'
          })
        }
      }
    })
    
[/code]


CC BY-SA 4.0
2019-02-17T16:29:45.127
52833
2019-02-17T16:29:45.127
30079
52829
answer