ERROR错误:无法匹配任何路线。-角形路由器

时间:2019-08-09 15:32:15

标签: angular angular-router

这是我在ts文件中的路由器:

{
        path: 'cpServices',
        component: CpServiceComponent,
        children: [
            {
                path: '',
                redirectTo: 'contentPlaceholder',
                pathMatch: 'full'
            },
            {
                path: 'contentPlaceholder',
                data: { showNavi: true },
                component: ShellContentPlaceholderComponent,

                children : [
                    {
                        path: '',
                        data: { showNavi: false },
                        component: ShellContentViewPlaceholderComponent,
                    },
                    {
                        path: 'view',
                        data: { showNavi: false },
                        component: ShellContentViewPlaceholderComponent,
                    },
                    {
                        path: 'create',
                        data: { showNavi: false },
                        component: ShellContentCreatePlaceholderComponent,
                    },
                    {
                        path: 'edit',
                        data: { showNavi: false },
                        component: ShellContentEditPlaceholderComponent,
                    },
                    {
                        path: 'update',
                        data: { showNavi: false },
                        component: ShellContentUpdatePlaceholderComponent,
                    }
                ]
            }

        ]
    }

当浏览器将路径保存为http://localhost:4200/#/cpServices/contentPlaceholder时,我开始在当前路径中键入view。因此该路径已更新为http://localhost:4200/#/cpServices/contentPlaceholder/view-现在我希望看到该页面。但是相反,我收到了以下错误消息:

ERROR Error: Cannot match any routes. URL Segment: 'cpServices/contentPlaceHolder/view'-这里的问题是什么? Firefox也可以正常工作。但是Chrome无法正常工作。

即使Firefox加载页面,`css1也不加载它会采用所有默认样式,除非我刷新同一页面。

这是什么原因造成的?该怎么解决?

有人帮我吗?

更新

const appRoutes: Routes = [
    { path: '', redirectTo: 'pfServices', pathMatch: 'full' },
    { path: 'setupConfig', loadChildren: () => import('./../setup-config/setup-config.module').then(m => m.SetupConfigModule) },
    { path: 'pfServices', loadChildren: () => import('./../pf-services/pf-services.module').then(m => m.PfServicesModule) }
];

@NgModule({
    declarations: [],
    imports: [
    CommonModule,
        RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled', useHash: false})
    ],
    // providers: [AuthenticationGuard],
    exports: [RouterModule]
})
export class RoutesModule { }

1 个答案:

答案 0 :(得分:0)

首先,我建议您在路由中不要使用哈希。只需在路由器配置中将其禁用

RouterModule.forRoot(routes, {useHash: false})