Angular 路由器，在现有 url 上运行答案

【问题标题】：Angular router, running over an existing urlAngular 路由器，在现有 url 上运行
【发布时间】：2021-10-23 20:52:24
【问题描述】：

嘿嘿，有 5 个页面的 SPA，登录页面旁边的每个页面都有导航，从那里我通过 routerLink 导航应用程序。

我正在寻找每条路由现有的 URL（没有主段）将在现有段上运行并将我路由到请求的 URL。

const routes: Routes = [


{path:'', component:LoginComponent},
  {path:'main_page', component:MainpageComponent},
  {path:'add_computer', component:AddcomputerComponent},
  {path:'edit_computer', component:EditcomputerComponent},
  {path:'remove_computer', component:RemovecomputerComponent},
];

例如：位于 = http://localhost:4200/main_page 的用户，我希望他重定向到 = http://localhost:4200/add_computer。

但实际发生的是 = http://localhost:4200/main_page/add_computer。

我找到了一些迂回的解决方案，但我听说有一个合适的解决方案。

我的导航栏示例：

<a routerLink="main_page">Main Page</a><br><br>
<a routerLink="add_computer">Add Computer</a><br><br>
<a routerLink="edit_computer">Edit Computer</a><br><br>
<a routerLink="remove_computer">Remove Computer</a><br><br>

【问题讨论】：

标签： angular angular-ui-router

【解决方案1】：

在您的组件文件中，您可以像这样检查您的路由器路径：

constructor(private router: Router) {}

ngOnInit(): void {
    console.log(this.router.config);
}

假设您只配置了上面的一个路由模块。这应该记录一个包含 5 个元素的数组，即您配置的路径。

如果这是正确的，您可以从 ts 文件中路由，例如：

this.router.navigate(['/add_computer']);

或来自 html 文件，例如：

<a [routerLink]="['/add_computer']">Add Computer Component</a>

【讨论】：