角路由不起作用，它将我重定向到基本URL

Question

我正在尝试使用angular router从我的页面导航。

我单击一个button ，然后导航到其他页面。

我当前的网址是： http://localhost:4200/user/12345567 。 从这里，我单击按钮以导航

这是我的button代码：

leaveArea(){
    this.router.navigate([ 'account', 'dashboard'], {relativeTo: this.route});
}

我想在单击时导航到http://localhost:4200/account/dashboard 。

但是相反，我导航到http://localhost:4200 。 有一瞬间（可能是一毫秒或更短的时间），在导航到http://localhost:4200之前，我确实看到该URL为http://localhost:4200/account/dashboard 。 路由逻辑有问题吗？

编辑

我正在添加routeTrace结果：

编辑

这是我的路由文件：

const appRoutes: Routes = [

    { path: "", component: HomeComponent },


    { path: "account/dashboard", component: AccountDashboardComponent},

    {
         path: "user/:id", component: UserComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { enableTracing: true })],
    exports: [RouterModule]
})
export class AppRoutingModule {}

Answer 1

只需尝试像这样使用router.navigateByUrl

leaveArea(){
    this.router.navigateByUrl('/account/dashboard');
}

PS：通过在字符串的开头添加/ ，将考虑从根级别进行路由。

Answer 2

首先 ，您有空白的路线。

它必须是最后的 。

路由在配置中的顺序很重要，这是设计使然。 路由器在匹配路由时会使用“先赢”策略，因此应将更具体的路由放在不那么具体的路由之上。 （ https://angular.io/guide/router ）

所以...

const appRoutes: Routes = [

    { path: "account/dashboard", component: AccountDashboardComponent},

    { path: "user/:id", component: UserComponent},

    { path: "", component: HomeComponent}
];

Answer 3

请尝试将您的路线更改为

const appRoutes: Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" }
    { path: "home", component: HomeComponent },
    { path: "account/dashboard", component: AccountDashboardComponent},
    { path: "user/:id", component: UserComponent }
];

并将您的导航线更改为

this.router.navigate(['/account', 'dashboard']);