¿Enrutando el mismo componente, el componente no se recarga en Vue con Vue Router?

- Andrés Cruz

In english
¿Enrutando el mismo componente, el componente no se recarga en Vue con Vue Router?

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.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.