Cómo establecer parámetros de consulta de URL en Vue con Vue-Router

Question

Cómo establecer parámetros de consulta de URL en Vue con Vue-Router

Estoy tratando de establecer parámetros de consulta con Vue-router al cambiar los campos de entrada, no quiero navegar a otra página, pero solo quiero modificar parámetros de consulta url en la misma página, estoy haciendo lo siguiente:

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

Pero esto también refresca la página y establece la posición y en 0, es decir, se desplaza a la parte superior de la página. ¿Es esta la forma correcta de establecer los parámetros de consulta URL o hay una mejor manera de hacerlo.

Editado:

Aquí está mi código de router:

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

34

javascript vue.js vue-router

Author: Saurabh, 2016-11-02

Source

2 answers

En realidad, puede enviar una consulta como esta: this.$router.push({query: {plan: 'private'}})

Basado en: https://github.com/vuejs/vue-router/issues/1631

1

Author: jean d'arme,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-24 17:07:36

score 39 · Accepted Answer

Aquí está el ejemplo en docs:

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

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

Como se menciona en esos documentos, router.replace funciona como router.push

Por lo tanto, parece que tiene razón en su código de ejemplo en cuestión. Pero creo que es posible que deba incluir el parámetro name o path también, para que el enrutador tenga alguna ruta a la que navegar. Sin un name o path, no parece muy significativo.

Este es mi entendimiento actual ahora:

query es opcional para el router-algo de información adicional para el componente para construir la vista
name o path es obligatorio - decide qué componente mostrar en su <router-view>.

Eso podría ser lo que falta en su código de ejemplo.

EDITAR: Detalles adicionales después de comentarios

¿Has intentado usar rutas nombradas en este caso? Tiene rutas dinámicas, y es más fácil proporcionar parámetros y consultas por separado:

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

Y luego en sus métodos:

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

Técnicamente no hay diferencia entre lo anterior y this.$router.replace({path: "/user/123", query:{q1: "q1"}}), pero es más fácil proporcionar parámetros dinámicos en rutas con nombre que componer la cadena de ruta. Pero en cualquiera de los casos, se deben tener en cuenta los parámetros de consulta. En cualquier caso, no pude encontrar nada malo en la forma en que se manejan los parámetros de consulta.

Después de estar dentro de la ruta, puede obtener sus parámetros dinámicos como this.$route.params.id y sus parámetros de consulta como this.$route.query.q1.