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

El paso a paso o código que verás en este artículo es la solución más rápida y efectiva que encontramos a tus dudas o dilema.

Solución:

Aquí está el ejemplo en documentos:

// 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

Entonces, parece que lo tiene bien en su código de muestra en cuestión. Pero creo que es posible que deba incluir cualquiera name o path parámetro también, para que el enrutador tenga alguna ruta para navegar. Sin un name o pathno parece muy significativo.

Esta es mi comprensión actual ahora:

• query es opcional para el enrutador: información adicional para que el componente construya la vista
• name o path es obligatorio – decide qué componente mostrar en su .

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

EDITAR: detalles adicionales después de los comentarios

¿Has probado a usar rutas con nombre ¿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 tus 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 ruta string. Pero en cualquier caso, 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.

Una vez que esté 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.

sin recargar la página o refrescar el dom, history.pushState puede hacer el trabajo.
Agregue este método en su componente o en otro lugar para hacer eso:

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

Entonces, en cualquier parte de su componente, llame addParamsToLocation(foo: 'bar') para insertar la ubicación actual con parámetros de consulta en la pila window.history.

Para agregar parámetros de consulta a la ubicación actual sin empujar una nueva historia entrada, uso history.replaceState en cambio.

Probado con Vue 2.6.10 y Nuxt 2.8.1.

¡Cuidado con este método!

Vue Router no sabe que la URL ha cambiado, por lo que no refleja la URL después de pushState.

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

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

---

---

Utiliza Nuestro Buscador