web-dev-qa-db-fra.com

Comment définir les paramètres de requête d'URL dans Vue avec Vue-Router

J'essaie de définir les paramètres de requête avec Vue-router lors de la modification des champs de saisie, je ne souhaite pas accéder à une autre page, mais simplement modifier les paramètres de requête url sur la même page. comme ça:

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

Mais cela actualise également la page et définit la position y sur 0, c’est-à-dire que vous faites défiler vers le haut de la page. Est-ce la bonne façon de définir les paramètres de requête d'URL ou existe-t-il une meilleure façon de le faire?.

Édité:

Voici mon code de routeur:

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
71
Saurabh

Voici l'exemple dans docs:

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

Réf.: https://router.vuejs.org/fr/essentials/navigation.html

Comme mentionné dans ces documents, router.replace fonctionne comme router.Push

Donc, vous semblez avoir cela dans votre exemple de code. Mais je pense que vous devrez peut-être également inclure le paramètre name ou path, afin que le routeur dispose d'un itinéraire vers lequel naviguer. Sans name ou path, cela n'a pas l'air très significatif.

Ceci est ma compréhension actuelle maintenant:

  • query est facultatif pour le routeur - informations supplémentaires permettant au composant de construire la vue
  • name ou path est obligatoire. Il détermine le composant à afficher dans votre <router-view>.

Cela pourrait être la chose manquante dans votre exemple de code.

EDIT: Détails supplémentaires après les commentaires

Avez-vous essayé d'utiliser des routes nommées dans ce cas? Vous avez des itinéraires dynamiques, et il est plus facile de fournir des paramètres et une requête séparément:

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

et ensuite dans vos méthodes:

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

Techniquement, il n'y a pas de différence entre ce qui précède et this.$router.replace({path: "/user/123", query:{q1: "q1"}}), mais il est plus facile de fournir des paramètres dynamiques sur des routes nommées que de composer la chaîne de route. Mais dans les deux cas, les paramètres de requête doivent être pris en compte. Dans les deux cas, je n'ai rien trouvé de mal à gérer les paramètres de requête.

Une fois que vous êtes dans la route, vous pouvez récupérer vos paramètres dynamiques sous la forme this.$route.params.id et vos paramètres de requête sous la forme this.$route.query.q1.

82
Mani

En fait, vous pouvez simplement lancer une requête comme ceci: this.$router.Push({query: {plan: 'private'}})

Basé sur: https://github.com/vuejs/vue-router/issues/1631

10
jean d'arme

Sans recharger la page ou rafraîchir le dom, history.pushState peut faire le travail.
Ajoutez cette méthode dans votre composant ou ailleurs pour le faire:

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

Donc, n'importe où dans votre composant, appelez addParamsToLocation({foo: 'bar'}) pour pousser l'emplacement actuel avec les paramètres de requête dans la pile window.history.

Pour ajouter des paramètres de requête à l'emplacement actuel sans pousser un nouvel historique entrée, utilisez plutôt history.replaceState.

Testé avec Vue 2.6.10 et Nuxt 2.8.1.

3
ManUtopiK
this.$router.Push({ query: Object.assign(this.$route.query, { new: 'param' }) })
2
Boston Kenne

Pour définir/supprimer simultanément plusieurs paramètres de requête, les méthodes ci-dessous font partie de mes mixins globaux (this pointe sur le composant 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