角路由不起作用，它将我重定向到基本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/account/dashboard之前，我确实看到了URL为http://localhost:4200。路由逻辑有问题吗？

修改

我要添加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

您有空白路线第一。

它必须是 last 。

  

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

所以...

const appRoutes: Routes = [

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

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

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

Answer 3

请尝试将您的路线更改为

com.vaadin.UI

并将导航行更改为

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