Angular使用routerLink的应用内导航异常：跨路由跳转失效

这是典型的Angular路由相对路径与绝对路径解析逻辑导致的问题，我来帮你快速搞定：

问题根源 #

当你在Registration路由页面（当前URL为/Registration）使用routerLink="Login"时，Angular会把它当作相对当前路由的子路径，实际解析后的路径是/Registration/Login——而你的路由配置里大概率没有这个子路由，所以跳转后没有匹配到对应组件，看起来就像是停留在了Registration页面。

而在首页（根路由/）使用routerLink="Login"时，相对路径会被解析为/Login，刚好匹配你的Login路由，所以能正常跳转。

解决方案 #

有几种简单直接的解决方式：

1. 使用绝对路径（最推荐） #

给routerLink加上开头的斜杠，明确告诉Angular跳转到根路由下的Login路径：

<button routerLink="/Login" mat-button color="primary" type="submit"> Log in </button>

这种方式不管当前处于哪个路由层级，都会直接跳转到/Login，逻辑清晰，也不容易出错。

2. 使用相对上级路径 #

如果你的路由层级比较简单，也可以用../表示上级路由（这里上级就是根路由）：

<button routerLink="../Login" mat-button color="primary" type="submit"> Log in </button>

不过这种方式在路由层级变深后（比如有多层子路由），容易搞混路径关系，不如绝对路径直观。

3. 通过Router服务编程式跳转（适合带逻辑判断的场景） #

如果你的按钮跳转需要配合业务逻辑（比如表单验证通过后再跳转），可以在组件中注入Router服务实现：

import { Router } from '@angular/router';

constructor(private router: Router) {}

// 按钮点击触发的方法
goToLogin() {
  // 这里可以添加逻辑判断，比如表单验证
  this.router.navigate(['/Login']);
}

然后模板修改为：

<button (click)="goToLogin()" mat-button color="primary" type="submit"> Log in </button>

额外验证 #

你可以检查下路由配置，确保Login是根路由下的一级路由，比如：

const routes: Routes = [
  { path: '', component: ProductShopComponent },
  { path: 'Login', component: LoginComponent },
  { path: 'Registration', component: RegistrationComponent },
];

这样绝对路径/Login就能正确匹配到对应组件了。

内容的提问来源于stack exchange，提问作者canko