Absolute and Relative Path in Routing

There are two ways to define links in the angular either prefixing with / or not.

Based on slash present or not, path will be either the absolute path or it will be a relative path.

When we use slash before the path, it will be an absolute path.

#1 Relative Paths

Relative paths specify the target route relative to the current route or the route being navigated from. They are often used when navigating within a feature module or a nested component hierarchy.

Usage: Relative paths are specified as strings without leading slashes (/). They are resolved based on the current route's URL.

Example:

Suppose you have the following routes:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'details', component: DetailsComponent }
];

To navigate from the products route to the details route using a relative path:

<a routerLink="../details">Details</a>

In this example, ../details represents a relative path that navigates up one level from the "products" route and then to the "details" route.

#2 Absolute Paths

Absolute paths specify the target route relative to the root of the application. They are typically used when navigating between top-level routes or across different feature modules.

Usage: Absolute paths are specified as strings with leading slashes (/). They are resolved based on the root URL of the application.

Example:
Continuing with the same routes, to navigate from any route to the "home" route using an absolute path:

<a routerLink="/home">Home</a>

In this example, /home represents an absolute path that navigates directly to the "home" route, regardless of the current route.