如何为多级路径定义 angular 6 条路线

Question

我想在angular6中定义多级路由，这是我需要的：

对于一级路线，我有：

dashboardRoutes:Routes=[
    {
        path: "dashboard",
        component: DashobardComponent,
        canActivate: [AuthGuard],
        children:[
            {
                path: 'user', component: UserComponent,
            },
            {
                path: 'overview', component:OverViewComponent
            }
        ]
    }
];

但是现在，我想拥有自己的概览child，所以我定义html为：

<div>This is overvew</div>
<router-outlet></router-outlet>

然后我定义了如下概览路线：

    const overviewRoutes:Routes = [
    {
        path: "",
        component: OverViewComponent,
        children:[
            {
                path:'reg',
                component: RegularComponent
            },
            {
                path:'rt',
                component: RealTimeComponent
            }
        ]
    }
];

然后我得到错误：

 Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/overview/reg'

现在，我迷路了，overView已经在第二条路由中定义了，我应该如何更新这里的第一条路由？

我把第一个改成了

路径：'overview'，重定向到：'overview/reg'，完全失败。

我可以在第一个路由定义中定义所有路由，但这一点都不够优雅。我想要这里自己模块中的概览路线定义。

希望你明白我的意思。

谢谢

Answer 1

很简单，OverViewComponent:

有一个空路径

const overviewRoutes:Routes = [
    {
        path: "",
        component: OverViewComponent,
        children:[
            {
                path:'reg',
                component: RegularComponent
            },
            {
                path:'anotherPage',
                component: anotherPageComponent
            }
        ]
    }
];

Answer 2

同意 Chrillewoodz 的解决方案。另外，最好将 'review' 组件及其子组件放入功能模块中。在那里你可以为这个功能模块定义路由文件。

查看官方Angular文档here, and also Deborah Kurata's Angular router topic talk in this year's NgConf

Answer 3

试试这个：

const overviewRoutes:Routes = [
{
    path: "dashboard/overview", // <-- missed this
    component: OverViewComponent,
    children:[
        {
            path:'reg',
            component: RegularComponent
        },
        {
            path:'rt',
            component: RealTimeComponent
        }
    ]
}

];

Anguar 说找不到路由 dashboard/overview/reg，因为你没有定义 dashboard/overview[=19= 在哪里].只需将其放在第一个组件的路径中即可。

如何为多级路径定义 angular 6 条路线

how to define angular 6 route for multiple level path

angular

angular-router

angular6