I have a page with tabs, each tab is loaded according to a route:
<div class="tabs-container">
<div class="tab-button" [routerLink]="'history'" [routerLinkActive]="'selected'">
<span class="pi pi-calendar"></span>
<span class="text">History</span>
</div>
<div class="tab-button" [routerLink]="'status'" [routerLinkActive]="'selected'">
<span class="pi pi-chart-line"></span>
<span class="text">Status</span>
</div>
<div class="tab-button" [routerLink]="'settings'" [routerLinkActive]="'selected'">
<span class="pi pi-cog"></span>
<span class="text">Settings</span>
</div>
</div>
If inside the "status" tab (route is /status
), and the "settings" tab button is clicked, the route changes to /settings
and the settings tab is loaded.
Inside the settings tab (route = /settings
), a nested route can be loaded, such as /settings/add
.
When inside a nested route under the settings tab, for ex. /settings/add
, how do I prevent going back and loading /settings
if the "settings" tab button is clicked?