Muchas veces cuando empleamos Vue Router, necesitamos llamar al mismo componente para recargar la información de la misma; pero en Vue, aunque varía la URL, veremos que el contenido no cambia, este es el comportamiento que tiene por defecto Vue Router pero podemos forzar a que actualice; para eso, te traigo un par de maneras:
No recargar el componente, es el comportamiento esperado en Vue, que está tratando de ser óptimo y reutilizar los componentes existentes.
Key en el router-view
Una solución un poco drástica, es colocarle una key en nuestro router-view, esto hará (que es un comportamiento normal en los componentes de Vue) que recargue este contenedor (la web SPA) apenas varía el path de la URL; para eso:
<router-view :key="$route.path"></router-view>beforeRouteUpdate en los componentes
Otra solución, que es la que me gusta, más, ya que nos permite definir este comportamiento en los componentes que necesitamos, y tener más control sobre qué es lo que queremos recargar y NO toda la pagina, es emplear el evento:
data() {
return {
sectionIndex: this.$route.params.s
classIndex: this.$route.params.c
};
},
beforeRouteUpdate(to) {
this.sectionIndex = to.params.s;
this.classIndex = to.params.c;
},En la cual, forzamos la actualización de nuestros parámetros mediante el acceso a los mismos, note que con el parámetro to, en beforeRouteUpdate, podemos obtener exactamente los mismos parámetros con los cuales trabaja la ruta de este componente.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter