ぺこめも

困ったときとかにいろいろまとめてる

nuxtjsのVueRouterのpushで、params[]=foo&params[]=bar みたいなことをしたかった

環境はnuxtjs2.x。Nodejsは10.x。

this.$router.push('foobar', {
  query: {
    params: ['foo', 'bar']
  }
})

みたいなので、通常だと http://xxxxxx?params=foo&params=bar というようなURLになる。
どうも、調べてみると queryString を使用して

parseQuery: function(query) {
  return queryString.parse(query, {
    arrayFormat: 'bracket'
  })
},
stringifyQuery: function(params) {
  if (0 === Object.keys(params).length) {
    return ''
  } else {
    return (
      '?' +
      queryString.stringify(params, {
        arrayFormat: 'bracket'
      })
    )
  }
}

このように書けばいいよというのを見つけた。
NodeJS 標準の queryString には arrayFormat ってつけるところないじゃないのん ρ(・ω・、)

そこで、query-string というライブラリを使用したらいいことが分かった。

www.npmjs.com

nuxt.config.js に以下を追加する。
parseQuerystringifyQuery の中で require しているのは、nuxt.config.js の最初(module.exports の外)に書いても、parseQuery などの中では queryString is not defined のエラーが出るから。

router: {
  parseQuery: function(query) {
    const queryString = require('query-string')
    return queryString.parse(query, {
      arrayFormat: 'bracket'
    })
  },
  stringifyQuery: function(params) {
    const queryString = require('query-string')
    if (0 === Object.keys(params).length) {
      return ''
    } else {
      return (
        '?' +
        queryString.stringify(params, {
          arrayFormat: 'bracket'
        })
      )
    }
  }
}

f:id:pekomiya:20180925220010p:plain

たのしい ( 厂・ω・ )厂うぇーい