Question

我想在角度6中定义多级路线，这就是我需要的：

对于第一级路线，我有：

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

但是现在，我想概述自己的孩子，所以我将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，我该如何在这里更新第一条路线？

我先改变了一个

路径：'概述'，redirectTo：'overview / reg'，完全失败。

我可以在第一个路线定义中定义所有路线，但这根本不够优雅。我想在这里的概述路由定义。

希望你明白我的意思。

由于

Answer 1

试试这个：

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

];

Anguar说无法找到路线 dashboard / overview / reg ，因为您没有定义信息中心/概述的位置。简单地把它放在第一个组件的路径上。

Answer 2

简单，只需要OverViewComponent的空路径：

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

Answer 3

同意Chrillewoodz的解决方案。此外，最好还是回顾一下＆＃39;组件及其子项成为功能模块。在那里，您可以为此功能模块定义路径文件。

请参阅官方Angular文档here，以及Deborah Kurata的角色路由器主题演讲this year's NgConf

如何为多级路径

3 个答案: