web-dev-qa-db-ja.com

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 },
  ]
})
javascriptvue-routervue.js
56
Saurabh

これが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として取得できます。

67
Mani

実際には、このようにクエリをプッシュするだけです。this.$router.Push({query: {plan: 'private'}})

に基づいて： https://github.com/vuejs/vue-router/issues/1631

7
jean d'arme
this.$router.Push({ query: Object.assign(this.$route.query, { new: 'param' }) })
1
Boston Kenne

一度に複数のクエリパラメータを設定/削除するには、私のグローバルミックスインの一部として以下のメソッドを使いました（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)
    },
0
vir us