Router.navigate vs window.location.href
Asked on March 05, 2024
In my Angular routing application, I need to navigate route using Router.navigate. I need to understand what if I use window.location.href.
Replied on March 05, 2024
1. In Angular, Router.navigate loads a route whereas window.location.href loads a URL. In loading URL, all components, root components and child components, are loaded freshly. For every hit of URL by window.location.href, application will load completely fresh.
2. Router.navigate navigates to new route by loading only the child components and not the complete application. It means when we navigate to child route within a parent route, then only child components will be loaded. Parent components are already loaded, hence it will not load again for that route.
3. In JavaScript, Window.location returns Location object that represents the URL. Location object has the properties as href, host, hostname, port etc. The href to location object can be assigned as below
window.location.href = http://localhost:4200/country/countryList/detail/1
The page will redirect to specified URL.
4. Use window.location.href to navigate from one application to another application.
onButtonClick() {
window.location.href = "http://localhost:4200/country";
}
5. Use Router.navigate, to navigate within an application.
constructor(private router: Router) { }
onButtonClick() {
this.router.navigate(['/country/countryList']);
}
