...

Si nos fijamos, podemos poner en cada ruta un campo props a true. Con esto, cuando naveguemos a esa ruta, los parámetros que se le pasen cuyo nombre coincida con un prop definido en el componente se asignará a este directamente. Es importante tener en cuenta que para hacer esto, tendremos que hacer la navegación utilizando el name, y no el path, pues si no, no funciona.

Definir sub-rutas

Podemos definir rutas hijas de una ruta ya existente, añadiéndolas al parámetro children de la ruta padrePara pasar las props al navegar, lo haremos especificándolos como campos dentro de un objeto que se pase a params:

this.$router.push({ name: 'user', params: { userId: '123' } }) 

Definir sub-rutas

Podemos definir rutas hijas de una ruta ya existente, añadiéndolas al parámetro children de la ruta padre:

  {
      {
    path: "/about",
    name: "about",
    component: About,
	children: [{path: "detalle", name: "Detalle", component: Detalle }]
  },

...

Como vemos, se le indica a dónde navegar con el nombre que hemos definido previamente para la ruta. Además podemos pasar datos como parámetro, con params. Después (también vale para pasar props al componente al que se navega). Después, en el componente al que se navega, podemos coger dichos datos referenciando a this.$route.params. En este ejemplo, el objeto que se ha pasado se cogería con this.$route.params.idReenviar.

...

Podemos consultar la documentación oficial para más detalles acerca del scrollBehavior.

Cacheo de assets

Para que se puedan hacer despliegues correctamente en Kubernetes, Cuando se cambia el nombre a un chunk de webpack, bien por hash bien porque se le cambia manualmente el nombre, si el usuario tiene cacheados según qué ficheros (o el HTML que lo llama o bien el JS) le dará la llamada un 404 si no se siguen dos pasos en el proyecto:

El primero, a nivel de nginx / apache / servidor que despliegue los assets: Evitar el cacheo de los servicios que devuelvan como tipo text/html. Para que el usuario no cachee el documento que realiza las llamadas a los JS/CSS. Como son aplicaciones SPA, los html son pequeños y no afecta excesivamente al rendimiento para el beneficio que da.

El segundo, a nivel de Vue Router, reiniciando la aplicación si se da un 404 en la carga de un chunk. Se ha añadido este código al router para gestionar el error:

router.onError((error) => {
  const hasBeenReloaded = localStorage.getItem('reloadChunkError') === 'on' || false;
  const hasError = /loading chunk \d* failed./i.test(error.message);
  if (hasError && !hasBeenReloaded) {
    localStorage.setItem('reloadChunkError', 'on');
    window.location.reload();
  } else if (hasError) {
    // eslint-disable-next-line no-alert
    alert('No tienes la última versión de la aplicación. Por favor, recarga la aplicación');
  }
});

En este caso, se guarda además un "flag" en localStorage para que, en el caso de un despliegue fallido en el que el desarrollador olvide borrar un elemento o algo similar, un 404 no implique el reinicio eterno de la aplicación una y otra vez. El alert es muy feo y se podría modificar por un mensaje genérico en Vuex.