• Quizás si te digo "modo hash" no sepas de qué estoy hablando, pero ha sido el método por defecto para enrutar en el cliente y es muy común encontrarlo en las primeras versiones de aplicaciones SPA. En base se trata de utilizar el hash "#" y simular una URL completa para evitar que la aplicación se recargue cuando cambiemos la URL.
  • El Vue Router el modo por defecto no es hash sino history. Con este modo conseguimos el mismo resultado sin tener que añadir un extraño hash a nuestra URL.
  • En Vue Router la propiedad mode es la que gestiona si usamos modo hash o modo historia.
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  ...
});
  • El modo hash usa la API de navegador pushSate ampliamente aceptada hoy en día. El único pero es que requiere una configuración especial en el servidor donde vaya a ser alojada la aplicación. En la documentación oficial se indica cómo configurar los servidores Web más comunes.
  • En nuestro caso vamos a utilizar las condiciones de deploy más típicas posibles, desplegando en Linux con Apache vía FTP, en un subdirectorio llamado /router.
  • Como se indica en la documentación debemos indicar a Apache vía archivo .htaccess (para Apache) las condiciones del despliegue. Podemos guardar este archivo en el directorio /public de nuestro proyecto, así Webpack lo copiará al directorio de salida en el proceso de compilación.
  • Si Webpack en especial o module bundling en general son algo borroso para ti, no te preocupes, en Escuela Vue tienes un curso de Webpack.
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /router
  RewriteRule ^router/index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /router/index.html [L]
</IfModule>
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/router/" : "/",
};
  • Ahora, tras lanzar una tarea build podemos desplegar el resultado a nuestro subdirectorio dist y comprobar que funciona.
  • Como indica en la documentación, hay otro problema: como redirigimos todo a index.html, no podemos operar cuando se produce un error 404. Solucionar es tan sencillo como añadir una ruta catch all con un asterisco * y asociarla a un nuevo componente que muestre un mensaje de error.
{ path: "*", component: NotFound }
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?

Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬