vue-router query stringで配列を扱う

vue-routerでquery stringをパラメータにつける際に配列がうまくいかなかったのでそのときに調べたことをメモしておく。想定しているurl以下の形。

http://localhost/my-component/?val=1&arr[]=10&arr[]=20

最初に試した書き方

this.$router.replace({
  name: 'my-component',
  query: {
    val: 1,
    arr: [10, 20]
  }
})

// 配列で指定した部分が配列にならない・・・
// http://localhost/my-component/?val=1&arr=10&arr=20

vue-routerのドキュメント見てたらparseQueryとstringifyQueryというのがあった
https://router.vuejs.org/ja/api/options.html#parsequery--stringifyquery

vue-routerのインスタンスを作るときに関数を指定すればカスタマイズできるみたい。query stringの処理にはnode.js入れると標準でquery-stringというモジュールが入っているみたいなのでこれを使う。

vue-routerインスタンス生成部分

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 '?' + queryStringify(params, {
        arrayFormat: 'bracket'
      })
    }
  }
})

呼び出し側は上で書いたのと同じだけど

this.$router.replace({
  name: 'my-component',
  query: {
    val: 1,
    arr: [10, 20]
  }
})

// 今度はうまくいった!
// http://localhost/my-component/?val=1&arr[]=10&arr[]=20

逆にurlからquery stringを取得するのも想定した形でいけた

console.log(this.$route.query) // => { val: 1, arr: [10, 20] }

以上です