El uso de href le dice directamente al navegador que abra el enlace como nuevo , de modo que la aplicación se vuelva a cargar y siga vinculada a la página exacta para la que se configuró.

Según el documento , routerLink navega por la aplicación sin recargar usando la API interna.

puede hacer clic en el enlace que usa href y routerLink para ver la demostración de diferencia

Las aplicaciones angulares son aplicaciones de una sola página (SPA). El uso de href rompe ese patrón de diseño. El efecto es que cada navegación que utiliza href restablece completamente el estado de su aplicación. Siempre evite href cuando use Angular o cualquier otro SPA.

routerLink carga recursos internos de Angular, y la página que se cargó en el navegador nunca se vuelve a cargar por completo (y, por lo tanto, se mantiene el estado de la aplicación). Una pista de que este es el caso es el indicador de carga del navegador:

Cuando se siguen los enlaces tradicionales, verá en su navegador la rueda girando (en la pestaña, o junto a la barra de direcciones en la mayoría de los casos). Cuando esté esperando que se carguen los componentes de Angular, esa rueda estará inactiva.

Es algo que siempre compruebo cuando desarrollo, cuando mi estado se reinicia. A veces, el problema es que usé href en lugar de routerLink.

Navegando usando href:

href es el atributo predeterminado proporcionado por los navegadores para navegar (cambiar) entre páginas, donde la página completa se volverá a cargar perdiendo el estado actual.

mientras que el truco consiste en evitar el comportamiento predeterminado.

por ejemplo:

Plantilla interior:

 <a href="route" (click)=onClick($event) />

Componente interior:

 onClick(event :Event){ event.preventDefault(); }

Usando el atributo de destino en href:

 Please refer to https://www.w3schools.com/tags/att_link_target.asp

Navegando usando routerLink:

Angular imita el comportamiento anterior dentro de la directiva routerLink

Si usa href en la aplicación angular, evítelo. Angular tiene una función de enrutador donde routerLink es parte de eso.

 <p routerLink='/path'>Text</p>

Para una mayor comprensión, consulte este artículo Enrutamiento angular

Bytech tiene una respuesta correcta, pero hay un caso en el que desea usar href en angular. Por ejemplo, tengo una sola aplicación que tiene varios proyectos. En un enlace, quiero navegar desde el proyecto de la tienda al proyecto del portal para miembros. En este caso, dado que se sirven en dos direcciones URL base diferentes (en este caso, para el entorno de desarrollo, es localhost: 4201 && localhost: 4202), el uso del enlace del enrutador en realidad no lo enrutará a la otra ubicación de la ruta base. Se requiere el uso de href o fallará el enrutamiento a la URL correcta.

A veces, no puede usar routerLink, si, por ejemplo, está en un componente web no angular.

Una solución alternativa que utilicé para solucionar el problema de actualización fue verificar todos los clics de la etiqueta "a" y evitar el comportamiento predeterminado si un atributo de enlace de enrutador no estaba presente y luego usar el enrutador para navegar.

 @HostListener('window:click', ['$event']) onClick(e: any) { const path = e.composedPath() as Array<any>; const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a'); if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) { const href = firstAnchor.getAttribute('href'); this.router.navigateByUrl(href); e.preventDefault(); } }

Href es el atributo básico proporcionado por Html para navegar por las páginas que recarga la página al hacer clic .

routerLink es el atributo proporcionado por angular para navegar a diferentes componentes sin recargar la página .

La principal diferencia entre ambos es que href elimina el estado de la página actual donde routerLink no pierde el estado de la página .

Por ej. si hay un cuadro de texto de entrada en la página, el enlace del enrutador conservará su valor después de la navegación . El enlace del enrutador se puede considerar como el atributo personalizado de href en angular al anular algunas de las características como la recarga de la página