为什么在routerLink Angular中使用斜线

Question

为什么前导斜杠被放在routerLink中，类似

<a [routerLink]="['/home']" [routerLinkActive]="['active']">Home</a>

这个没有斜杠的<a [routerLink]="['home']" [routerLinkActive]="['active']">Home</a>代码对我来说也很好，而且在'forRoot'方法中，path: "home"中没有前导斜杠(这里没有前导斜杠(

RouterModule.forRoot([
{path:'home',component:HomeComponent},
{path:'**',component:PageNotFoundComponent}
])

在一些网站上，我看到了尾随斜杠也

const routes: Routes = [    
{ path: '', redirectTo: 'home/.', pathMatch: 'full'},    
{ path: 'home/.', component: HomeComponent },          
];  

(请注意上面path属性中的尾部斜杠，并在尾部斜杠后面加上句点"."(带有路由器链路

<a [routerLink]="['/home/.']" [routerLinkActive]="['active']">Home</a> 

(路由器链接还有尾随和前导斜杠(我很困惑，请帮助

Answer 1

1。(前导斜杠表示路由应从路由数组的根开始。例如，你的路线结构就像这个

RouterModule.forRoot([
{path:'home',component:HomeComponent},
{path:'admin', component: AdminComponent, children:[
{path:'home', component: AdminHomeComponent},
{path:'users', component:AdminUsersComponent}
]}
{path:'**',component:PageNotFoundComponent}
])

这里有两个路径为home的路由，一个在具有HomeComponent的阵列的路由上，另一个在拥有AdminHomeComponent的admin内现在假设如果您在admin/users路径中，并且在AdminUsersComponent中，您有一个类似的路由

<a [routerLink]="['home']">Application Home</a>

它将重定向到具有AdminHomeComponent的home路径，因为如果没有前导斜杠，路径相对于路由器的当前路由将是。如果您想从嵌套路径转到根home组件，您可以使用类似的前导斜杠

<a [routerLink]="['/home']">Application Home</a>

2.(为了SEO的目的，在url中放置一个尾随斜杠(url末尾的反斜杠(。为了解释这一点，假设你有一个像这样的路由阵列

const routes: Routes = [  
{ path: '', redirectTo: 'home', pathMatch: 'full'},  
{ path: 'home', component: HomeComponent },  
{ path: 'about', component: AboutUsComponent },  
{ path: 'contactus', component: ContactUsComponent }  
];

如果您导航到带有的页面http://localhost:4200/about或带有http://localhost:4200/about/您将看到相同的AboutUsComponent。对我们来说，它们都意味着相同的url，但对搜索引擎来说，它们意味着不同的url。让两个不同的url呈现相同的内容，并不是一个好的SEO实践。这就是为什么开发人员将尾部斜杠放在url中，并设计一种机制，如果默认情况下缺少尾部斜杠，则在路由中添加尾部斜杠(或者提供永久重定向301，以免混淆搜索引擎(

这里有一个很好的链接，解释了有角度路线中的尾部斜线。