SIerだけど技術やりたいブログ

5年目のSIerのブログです

Vuejs vue-router クエリパラメータの一部だけを取り除く

vue-router のクエリを一部のみ取り除く

バージョン

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }

やりたいこと

  • 検索したらURLにパラメータが付与される。
  • ボタンを押したらパラメータが一部だけ削除される

f:id:kimulla:20180127180436g:plain

ソースコード

<template>
  <div>
  <div>
    <form @submit.prevent="$router.push({query: {q: q, type: type} })">
    <input type="text" v-model="q" />
    <input type="text" v-model="type" />
    <button type="submit">絞り込む</button>
    </form>
  </div>
  <div style="margin-top:30px">
    <button @click="deleteQuery('q')" type="button">X 絞り込みワード</button>
    <button @click="deleteQuery('type')" type="button">X タイプ</button>
  </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
  return {
    q: null,
    type: null
  }
  },
  methods: {
    deleteQuery: function (key) {
      var query = Object.assign({}, this.$route.query)
      delete query[key]
      this.$router.push({query: query})
    }
  }
}
</script>

注意点

絶対に$routeオブジェクトの戻り値をそのまま利用しないこと。

以下のように$routeオブジェクトの戻り値をそのまま利用すると、$router.pushしたときにvue-routerがパラメータの変更を検出できず、URLが切り替わらない。

<script>
...
    deleteQuery: function (key) {
      var query = this.$route.query
      delete query[key]
      this.$router.push({query: query})
    }
</script>

これに2hくらいハマった。内部で$routeオブジェクトを比較してリクエストするかどうか判別してるらしい。vue-router 頭いいー。

github.com