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 comorouter.push
Entonces, parece que lo tiene bien en su código de muestra 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 para navegar. Sin una name
o path
, no parece muy significativo.
Este es mi entendimiento actual ahora:
query
es opcional para el enrutador: alguna 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 muestra.
EDITAR: Detalles adicionales después de los comentarios
¿Ha intentado utilizar 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 los anteriores 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 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 recuperar sus parámetros dinámicos como this.$route.params.id
y sus parámetros de consulta como this.$route.query.q1
.