En mi aplicación Vue.js (2.x) tengo un componente que representa un buzón, es decir, muestra una lista de mensajes. La ruta del componente se define así:

 { path: '/messages/:messageId', name: 'messages', component: Messages, // this sets the component's messageId prop to the same value as the route param props: true }

Cuando se crea el componente, los mensajes se cargan desde el servidor. Si se especifica el parámetro de ruta messageId , el mensaje con este ID se seleccionará inicialmente

 props: { messageId: { type: String, required: false, default: null } }, data () { return { allMessages: [], selectedMessage: null } }, async created () { this.allMessages = await messageService.loadMessages() if (this.messageId) { this.selectedMessage = this.allMessages.find(message => message.id == this.messageId); } }

Cuando el usuario hace clic en un mensaje, se actualiza el mensaje selectedMessage . También me gustaría actualizar el parámetro de ruta messageId para que el usuario pueda (por ejemplo)

• haga clic en un mensaje
• copie la URL (actualizada) de la barra de direcciones del navegador
• abra una nueva pestaña y pegue la URL para volver a cargar la página con el mismo mensaje seleccionado

Sin embargo, no estoy seguro de cómo actualizar el parámetro de ruta cuando cambia el mensaje seleccionado. Supongo que podría hacer algo como

 methods: { onMessageSelected (selectedMessage) { this.selectedMessage = selectedMessage const params = { messageId: selectedMessage.id } this.$router.push({ name: 'messages', params: params } }) } }

Pero esto vuelve a cargar toda la ruta/componente, lo que hace que la lista de mensajes se vuelva a buscar, lo que es muy ineficiente. ¿Hay alguna manera de simplemente actualizar el parámetro de ruta en la URL sin recargar la ruta/componente?