Question

我关注angular official tutorial。这个问题让我很困惑，但本教程没有解释原因。

当我们点击一个元素时，我们会路由到一个视图/模板。你可以看到，我们有'/英雄'，为什么我们需要在这里添加'/'？我删除了'/'，然后路由器无法正常工作。

template: `
   <h1>{{title}}</h1>
   <nav>
     <a routerLink="/dashboard">Dashboard</a>
     <a routerLink="/heroes">Heroes</a>
   </nav>
   <router-outlet></router-outlet>

这是路由器定义，但它没有'/'。

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];

Answer 1

假设您正在使用<a routerLink="/heroes">Heroes</a> Angular会尝试路由到yoururl/heroes。使用<a routerLink="heroes">Heroes</a>将链接附加到当前路线。

让我们说，例如你是这条路线yoururl/dasboard。

这基本上会导航到yoururl/heroes

<a routerLink="/heroes">Heroes</a>

虽然这会导航到yoururl/dasboard/heroes

<a routerLink="heroes">Heroes</a>

为什么我需要在routerLink中添加'/'，但我们在路由器定义中没有'/'？

1 个答案: