Vue-Router ile Vue'da URL sorgu parametreleri nasıl ayarlanır

Giriş alanlarını değiştirirken Vue-yönlendirici ile sorgu parametreleri ayarlamaya çalışıyorum, başka bir sayfaya gitmek istemiyorum ama sadece aynı sayfadaki url sorgu parametrelerini değiştirmek istiyorum, şöyle yapıyorum:

this.$router.replace({ query: { q1: "q1" } })

Ancak bu aynı zamanda sayfayı yeniler ve y konumunu 0 olarak ayarlar, yani sayfanın en üstüne kaydırır. URL sorgu parametrelerini ayarlamanın doğru yolu bu mu yoksa bunu yapmanın daha iyi bir yolu var mı?

Düzenlendi:

İşte yönlendirici kodum:

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 },
  ]
})

İşte dokümanlardaki örnek:

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Referans: https://router.vuejs.org/en/essentials/navigation.html

Bu belgelerde belirtildiği router.replacegibi , şu şekilde çalışır:router.push

Öyleyse, söz konusu örnek kodunuzda doğru şekilde var gibi görünüyor. Ancak , yönlendiricinin gezinmek için bazı rotaları olması için, nameveya pathparametresini de eklemeniz gerekebileceğini düşünüyorum . Bir nameveya olmadan pathçok anlamlı görünmüyor.

Şu anki anlayışım bu:

• query yönlendirici için isteğe bağlıdır - görünümü oluşturmak için bileşenin bazı ek bilgileri
• nameveya pathzorunludur - içinde hangi bileşenin gösterileceğine karar verir <router-view>.

Örnek kodunuzdaki eksik şey bu olabilir.

DÜZENLE: Yorumlardan sonra ek ayrıntılar

Bu durumda adlandırılmış yolları kullanmayı denediniz mi? Dinamik rotalarınız vardır ve parametreleri ve sorguyu ayrı ayrı sağlamak daha kolaydır:

routes: [
    { name: 'user-view', path: '/user/:id', component: UserView },
    // other routes
]

ve sonra yöntemlerinde:

this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })

Teknik olarak yukarıdakiler ile arasında bir fark yoktur this.$router.replace({path: "/user/123", query:{q1: "q1"}}), ancak adlandırılmış rotalarda dinamik parametreler sağlamak, rota dizesini oluşturmaktan daha kolaydır. Ancak her iki durumda da sorgu parametreleri dikkate alınmalıdır. Her iki durumda da, sorgu parametrelerinin işlenme biçiminde yanlış bir şey bulamadım.

Rotaya girdikten sonra, dinamik parametrelerinizi this.$route.params.idve sorgu parametrelerinizi olarak alabilirsiniz this.$route.query.q1.

Sayfayı yeniden yüklemeden veya domu yenilemeden history.pushStateişi yapabilir.
Bunu yapmak için bu yöntemi bileşeninize veya başka bir yere ekleyin:

addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

Böylece, bileşeninizin herhangi bir yerinde addParamsToLocation({foo: 'bar'}), window.history yığınındaki sorgu parametreleriyle geçerli konumu itmek için arayın .

Yeni bir geçmiş girişi göndermeden geçerli konuma sorgu parametreleri eklemek için , history.replaceStatebunun yerine kullanın.

Vue 2.6.10 ve Nuxt 2.8.1 ile test edilmiştir.

Bu yönteme dikkat edin!
Vue Router url'nin değiştiğini bilmediğinden pushState'ten sonraki url'yi yansıtmaz.

Aslında şu şekilde sorgu gönderebilirsiniz: this.$router.push({query: {plan: 'private'}})

Şuna göre: https://github.com/vuejs/vue-router/issues/1631

this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })

Birden çok sorgu parametresi eklemek için benim için işe yarayan şey buydu (buradan https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5 ).

yukarıdaki bir cevap yakındı… ancak Object.assign ile bunu değiştirecek. $ route.query, yapmak istediğiniz şey değil… Object.assign yaparken ilk argümanın {} olduğundan emin olun

this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });

Bazı parametreleri tutmaya çalışırken diğerlerini değiştirmeye çalışıyorsanız, vue yönlendirici sorgusunun durumunu kopyaladığınızdan ve yeniden kullanmadığınızdan emin olun.

Referanssız bir kopya yaptığınız için bu işe yarar:

  const query = Object.assign({}, this.$route.query);
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

Aşağıdakiler, Vue Router'ın aynı sorguyu yeniden kullandığınızı düşünmesine ve NavigationDuplicatedhataya yol açmasına neden olacaktır :

  const query = this.$route.query;
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

Elbette, sorgu nesnesini aşağıdaki gibi ayrıştırabilirsiniz, ancak sayfanızdaki tüm sorgu parametrelerinin farkında olmanız gerekir, aksi takdirde ortaya çıkan gezinmede onları kaybetme riskiyle karşılaşırsınız.

  const { page, limit, ...otherParams } = this.$route.query;
  await this.$router.push(Object.assign({
    page: page,
    limit: rowsPerPage
  }, otherParams));
);

Yukarıdaki örnek için olduğu halde push(), bunun da işe yaradığını unutmayın replace().

Vue-router 3.1.6 ile test edilmiştir.

Birden fazla sorgu parametresini aynı anda ayarlamak / kaldırmak için, genel karışımlarımın bir parçası olarak aşağıdaki yöntemleri kullandım ( thisvue bileşenini işaret eder):

    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)
    },

Normalde bunun için geçmiş nesnesini kullanırım. Ayrıca sayfayı yeniden yüklemez.

Misal:

history.pushState({}, '', 
                `/pagepath/path?query=${this.myQueryParam}`);

Sayfayı yenilemeden URL'deki sorgu parametrelerini güncellemek için basit çözümüm. Kullanım durumunuz için çalıştığından emin olun.

const query = { ...this.$route.query, someParam: 'some-value' };
this.$router.replace({ query });