Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Curso Vue Router esencial, aprende a enrutar con Vue
Modo hash, modo historia y deploy
- 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
hashsinohistory. Con este modo conseguimos el mismo resultado sin tener que añadir un extraño hash a nuestra URL. - En Vue Router la propiedad
modees la que gestiona si usamos modohasho modo historia.
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
...
});
- El modo hash usa la API de navegador
pushSateampliamente 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/publicde 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>
- También debemos cambiar el valor de la propiedad
publicPatha través de un archivo de configuraciónvue.config.js.
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/router/'
: '/'
}
- Ahora, tras lanzar una tarea
buildpodemos desplegar el resultado a nuestro subdirectoriodisty 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 }
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
