javascript - versiones - vue router laravel

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

Question

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 los parámetros de consulta de URL en la misma página, estoy haciendo esto:

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

Pero esto también actualiza 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 configurar los parámetros de consulta de URL o hay una mejor manera de hacerlo?

Editado:

Aquí está mi código de enrutador:

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

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 mencionó en esos documentos, router.replace funciona como router.push

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

Esta es mi comprensión actual ahora:

• query es opcional para el enrutador: información adicional sobre el componente para construir la vista
• name o la path son obligatorios: decide qué componente mostrar en su <router-view> .

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

EDITAR: detalles adicionales después de los comentarios

¿Has intentado 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 componiendo la cadena de ruta. Pero en cualquier caso, los parámetros de consulta deben tenerse en cuenta. En cualquier caso, no pude encontrar nada malo con la forma en que se manejan los parámetros de consulta.

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

Answer 2

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

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

Answer 3

Para configurar / eliminar múltiples parámetros de consulta a la vez, terminé con los siguientes métodos como parte de mis mixins globales ( this apunta al componente 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)
    },

Answer 4

Sin volver a cargar la página o actualizar la 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 a 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 presionar una nueva entrada en el historial , use history.replaceState lugar.

Probado con Vue 2.6.10 y Nuxt 2.8.1.

Answer 5

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