为什么 Angular routerLink（没有前导斜杠）在导航回空路径时被破坏？

Question

Let's take this basic navigation tree:

• primary
  • secondary
    • deep

Look at my Stackblitz project .

My routes are

const routes: Routes = [
  {
    path: "",
    component: PageParentComponent,
    children: [
      {
        path: "",
        component: PageChildPrimaryComponent
      },
      {
        path: "secondary",
        component: PageChildSecondaryComponent
      },
      {
        path: "secondary/deep",
        component: PageDeepComponent
      }
    ]
  }
];

Using <a routerLink=".."> , I can successfully navigate up one level, and using <a routerLink="../.."> two levels. However, when I use double dots to go back to the "primary" page from any deeper page, any routerLink that doesn't start with a slash is messed up; the root part of the URL ( https://angular-ukxb4a.stackblitz.io/ or localhost:4200/ , when run locally) is replaced with %28 . When I use <a routerLink="/"> (slash instead of double dots), everything is fine.

Why is that happening?

Answer 1

The URL you want to go is

https://angular-ukxb4a.stackblitz.io/secondary

NOT

https://%28secondary%29/

The starting slash will append path to your existing path. I hope this will help you.