課題
- Vuejs利用時に、以下のようにクエリパラメータを一部のみ取り除きたい
- 検索したらURLにクエリパラメータが付与される
- ボタンを押したら対応するクエリパラメータだけURLから削除される
検証環境
"dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }
解決方法
queryオブジェクトをvue-routerから取得し、クエリパラメータを除去して再設定する。
<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オブジェクトの戻り値のqueryをそのまま利用しないこと。
以下のように\$routeオブジェクトの戻り値のqueryをそのまま利用すると、\$router.pushしたときにvue-routerがパラメータの変更を検出できず、URLが切り替わらない。
<script> ... deleteQuery: function (key) { var query = this.$route.query delete query[key] this.$router.push({query: query}) } </script>
どうやら、内部で$routeオブジェクトを比較してリクエストするかどうか判別してる様子。
参考: vue router ソースコード
なので、戻り値と同じオブジェクトを再設定すると、差分がないと勘違いしてしまう。 ややハマったので注意。