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

Question

Je suis en train de mettre requête params avec Vue-routeur lors de la modification des champs de saisie, je ne veux pas naviguer vers une autre page mais juste envie de modifier l'url de la requête params sur la même page, je fais comme ceci:

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

Mais c'est aussi le rafraîchissement de la page et définit la position y 0, c'est à dire défile en haut de la page. Est-ce la bonne manière de définir l'URL de la requête params ou est-il une meilleure façon de le faire.

---

Modifié:

Voici mon routeur code:

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

Answer 1

Voici l'exemple dans les docs:

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

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

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

Donc, vous semblez avoir dans votre exemple de code en question. Mais je pense que vous pourriez avoir besoin d'inclure des name ou path paramètre également, de sorte que le routeur a une route à naviguer. Sans un name ou path, il n'est pas très significatif.

C'est ma compréhension actuelle maintenant:

• query est facultatif pour le routeur - quelques informations supplémentaires pour le composant pour construire une vue
• name ou path est obligatoire, il décide de ce composant à afficher dans votre <router-view>.

Cela peut être le manque chose dans votre exemple de code.

EDIT: plus de détails après les commentaires

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

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

et puis 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 en this.$router.replace({path: "/user/123", query:{q1: "q1"}}), mais il est plus facile de l'approvisionnement dynamique params sur les routes nommées que la composition de l'itinéraire de la chaîne. Mais dans les deux cas, la requête de paramètres doivent être pris en compte. Dans les deux cas, je ne pouvais pas trouver quelque chose de mal avec la façon dont la requête params sont traitées.

Après vous êtes à l'intérieur de la route, vous pouvez aller chercher votre dynamique params comme this.$route.params.id et que votre requête params comme this.$route.query.q1.

Answer 2

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

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