Modos de historia
Clase 10 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Eduardo Razo Cobián
student•
hace 4 años
Clase 10 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Eduardo Razo Cobián
Carlos Rodríguez
Matias Martel
Guillermo Castaño Vèlez
George M
Diana Martinez
Navegación HTML5 (createWebHistory) trabaja desde el backend
Navegación con Hash trabaja desde el frontend, este tipo de navegación no beneficia al SEO.
Si usan este método de navegación con hash y un server nativo de node.js o librería, tener cuidado si tienen en su template variables relacionadas a las rutas tipo:
<h2>params: {{ this.$route }}</h2> <h2>query: {{ this.$router }}</h2>
. Ya que vite no trsnspilara bien y podría no cargarse algunos componentes enroutados. . Referencia: Different History modes
Por si alguien tiene un error al ejecutar node server.js asi es como deberia ir actualmente:import express from 'express'; const app = express(); app.use(express.static('dist')) app.listen(8080, () => { console.log('localhost:8080')})
import express from 'express'; const app = express(); app.use(express.static('dist')) app.listen(8080, () => { console.log('localhost:8080') }) ```Tambien pueden añadirlo a los scripts de package.json para usarlo por medio de npm run \<nombre>```js "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "start": "node server.js" }, ```"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "start": "node server.js" },
EN la documentaci ón oficial del router hay una solución muy buena para ese problema del historyMode y la recarga, varía según el servicio de hosting que se utilice, pero en resumen es que cada petición al dominio la redirija al index.html y así pueda encontrar la ruta.
Entonces cual seria la forma correcta de configurar el servidor para que funcionen siempre bien todas las rutas? saludos
Eso va a depender completamente de como quieras cada proyecto, no puedo ponerme a hacer todas las combinaciones posibles, pero en términos generales, el modo historia (sin hash) se puede usar si desde el backend puedes devolver el archivo index ante cualquier URL válida, y que el frontend la procese, mientras que el modo hash es para cuando no tienes esa opción y solo tienes control del frontend.