在 Angular 6 中实现子路由时出错答案

【问题标题】：Error implementing child routes in Angular 6在 Angular 6 中实现子路由时出错
【发布时间】：2018-09-10 09:08:21
【问题描述】：

我在为我的项目实现子路由时遇到错误。我在 GitHub 和其他网站上没有找到任何帮助。

ERROR 错误：未捕获（承诺中）：SecurityError：执行失败 'History' 上的 'pushState'：带有 URL 的历史状态对象 'http://%28routes%29/' 无法在具有来源的文档中创建 'http://localhost:4200' 和 URL 'http://localhost:4200/'。错误：无法在“历史”上执行“pushState”：历史状态对象无法在具有 URL 'http://%28routes%29/' 的文档中创建来源 'http://localhost:4200' 和 URL 'http://localhost:4200/'。

【问题讨论】：

您好，您能告诉我们您是如何配置路线的吗？
如果您在问题中添加代码实现，它将帮助我们找到您的答案
尝试使用基于哈希的路由策略导入 [RouterModule.forRoot(routes, {useHash: true})]
const appRoutes: Routes = [ { path: '', component: HomeComponent, canActivate: [AuthGuard], children: [ {path: '', component: CutoffValidationComponent}, {path: 'CutoffValidation' ，组件：CutoffValidationComponent}，{路径：'routes'，组件：RoutesComponent}，{路径：'cutoffs'，组件：CutoffsComponent}]}，{路径：'登录'，组件：LoginComponent }，{路径：'** ', 重定向到：'' } ]; export const routing = RouterModule.forRoot(appRoutes, { enableTracing: false });

标签： angular angular6

【解决方案1】：

我遇到了同样的问题，这是由于路由器链接字符串前面缺少斜杠“/”引起的。更清楚地说，当链接被定义为时，我遇到了问题：

<mat-list-item><a class="mat-h3 menu-link" [routerLink]="['about']">About</a></mat-list-item>

当我将其更正为时问题消失了：

<mat-list-item><a class="mat-h3 menu-link" [routerLink]="['/about']">About</a></mat-list-item>

【讨论】：

【解决方案2】：

const appRoutes: Routes = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard], 
        children: [
            {path: '', component: CutoffValidationComponent},
            {path: 'CutoffValidation', component: CutoffValidationComponent},
            {path: 'routes', component: RoutesComponent},
            {path: 'cutoffs', component: CutoffsComponent},
            {path: 'piece', component: PiecesComponent},
            {path: 'flights', component: FlightsComponent}

        ]
    },
    { path: 'login', component: LoginComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes, { enableTracing: false });

这就是我配置路由的方式。

【讨论】：