VueにVue-Routerを使ってURLクエリパラメータを設定する方法
入力フィールドを変更するときに Vue-router を使用してクエリパラメータを設定しようとしています。他のページに移動するのではなく、同じページのURLクエリパラメータを変更するだけです。このような:
this.$router.replace({ query: { q1: "q1" } })
しかし、これはまたページを更新し、y位置を0に設定します。つまり、ページの一番上にスクロールします。これはURLクエリパラメータを設定するための正しい方法ですか、またはそれを行うよりよい方法があります。
編集:
これが私のルーターコードです:
export default new Router({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => {
if (to.hash) {
return {selector: to.hash}
} else {
return {x: 0, y: 0}
}
},
routes: [
.......
{ path: '/user/:id', component: UserView },
]
})
これがdocsの例です。
// with query, resulting in /register?plan=private
router.Push({ path: 'register', query: { plan: 'private' }})
参照: https://router.vuejs.org/en/essentials/navigation.html
これらのドキュメントで述べられているように、router.replace
はrouter.Push
のように機能します
それで、あなたはそれを問題のあなたのサンプルコードの中に正しく持っているようです。しかし、私はあなたがname
かpath
パラメータのどちらかを含める必要があるかもしれないと思うので、ルータはナビゲートするためのいくらかのルートを持っています。 name
またはpath
がないと、あまり意味がありません。
これが私の現在の理解です。
query
はrouterの場合はオプションです - ビューを構築するためのコンポーネントの追加情報name
またはpath
は必須です -<router-view>
にどのコンポーネントを表示するかを決定します。
それはあなたのサンプルコードで欠けているものかもしれません。
編集:コメントの後の追加詳細
この場合、という名前のルートを使用してみましたか。動的な経路があり、パラメータとクエリを別々に提供する方が簡単です。
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]
そして、あなたの方法では:
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
技術的には上記とthis.$router.replace({path: "/user/123", query:{q1: "q1"}})
の間に違いはありませんが、ルート文字列を構成するよりも名前付きルートに動的パラメータを供給する方が簡単です。しかし、どちらの場合でも、クエリパラメータを考慮する必要があります。どちらの場合も、クエリパラメータの処理方法に問題があるとは思いませんでした。
ルートに入ったら、動的パラメータをthis.$route.params.id
として、クエリパラメータをthis.$route.query.q1
として取得できます。
実際には、このようにクエリをプッシュするだけです。this.$router.Push({query: {plan: 'private'}})
this.$router.Push({ query: Object.assign(this.$route.query, { new: 'param' }) })
一度に複数のクエリパラメータを設定/削除するには、私のグローバルミックスインの一部として以下のメソッドを使いました(this
はvueコンポーネントを指しています)。
setQuery(query){
let obj = Object.assign({}, this.$route.query);
Object.keys(query).forEach(key => {
let value = query[key];
if(value){
obj[key] = value
} else {
delete obj[key]
}
})
this.$router.replace({
...this.$router.currentRoute,
query: obj
})
},
removeQuery(queryNameArray){
let obj = {}
queryNameArray.forEach(key => {
obj[key] = null
})
this.setQuery(obj)
},