Href vs router link: navegación angular

Cambiar de Href a router link en Angular marca la diferencia entre una navegación lenta y una experiencia fluida. Al evitar la redirección del browser y delegar el control al router de Angular, la respuesta es inmediata y la interfaz se siente profesional y consistente.

¿Cómo se configuró la navegación entre “Lugares” y “Detalle”?

En el archivo app.component.html, se preparó la barra de navegación con hipervínculos. Se reemplazó temporalmente “Contacto” por “Detalle” y se asignaron destinos: “Inicio” → “Lugares” y “Detalle” → “Detalle”. Con esto, la URL permite moverse entre vistas de forma sencilla.

• Archivo modificado: app.component.html.
• Enlaces configurados: Inicio → Lugares. Detalle → Detalle.
• Objetivo: navegar entre vistas desde la barra, usando la URL.

¿Qué se observó al probar los enlaces con Href?

Al hacer clic en “Detalle” o “Inicio”, la interfaz tardaba alrededor de un segundo en cambiar. Ese “tiempo de carga” se debe a una redirección del browser, algo que no debe ocurrir en Angular ni en una single page application.

• Problema: Href produce una recarga completa de la página.
• Efecto visible: retardo de ~1 segundo al cambiar de vista.
• Contexto frecuente: error común cuando se viene de un background de HTML.

¿Por qué Href es un problema en una single page application?

En una single page application, el enrutamiento debe ocurrir dentro de la misma página. Usar Href fuerza al navegador a recargar el documento, rompiendo el comportamiento esperado: transiciones inmediatas y sin parpadeos.

• Mala práctica: usar Href para rutas internas en Angular.
• Consecuencia: recarga del documento y pérdida de fluidez.
• Expectativa en Angular: navegación sin redirecciones y con cambios instantáneos.

¿Qué hace diferente a router link?

Sustituir Href por router link en los enlaces permite que el router de Angular gestione el cambio de vista internamente. El router selecciona el componente correcto y lo inyecta en index.html, sin recargar la página.

• Acción clave: cambiar Href por router link en ambos enlaces.
• Resultado: navegación inmediata, sin tiempos de carga visibles.
• Mecanismo: el router resuelve la ruta y muestra el componente correspondiente.

¿Qué mejoras quedan pendientes en la interfaz?

La navegación ya es funcional y rápida. Sin embargo, al ingresar a “Detalle”, el estado visual de la barra no refleja la ruta activa: “Inicio” permanece en blanco y “Detalle” no aparece como seleccionado. Esto se abordará después para resaltar dinámicamente la opción activa según la ruta.

• Estado actual: navegación completa y sin redirecciones.
• Detalle de UX: falta resaltar la opción activa en la barra.
• Próximo paso: adaptar estilos según la ruta seleccionada.

¿Te surgieron dudas sobre el cambio de Href a router link o sobre el comportamiento del router de Angular? Comparte tus preguntas y casos prácticos para profundizar juntos.