【问题标题】:Uncaught (in promise): Error: Cannot match any routes. URL Segment: Angular未捕获(承诺):错误:无法匹配任何路由。 URL 段:角
【发布时间】:2019-05-12 00:04:59
【问题描述】:

我是 Angular 的新手。我正在使用 Angular 7 并进行简单的路由。 登录页面后,我想显示一个主页。登录是 app-root 组件的一部分,在主页中我显示 header 和 sidenav 但我无法路由到主页。

app-routimg.module.ts

const appRoutes: Routes = [
  {
    path: '',
    loadChildren: './login/login.module#LoginModule'
},
  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashBoardModule',

}
];
  @NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule],
   // providers: [AuthGuard]
}

dashboard-routing.modul.ts

const appRoutes: Routes = [
  {
    path: 'dashboard',
    component: DashBoardComponent ,
    children: [
         {
             path: '',
            redirectTo: 'home'
        },
        {
            path: 'home',
            loadChildren: './home/home.module#HomeModule'
        },

    ]
}
];
@NgModule({
  imports: [
    RouterModule.forChild(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})

login.component.ts

onSubmit() {

       this._router.navigate(['/home']);
      }
}

core.js:15724 ERROR 错误:未捕获(在承诺中):错误:无法匹配 任何路线。 URL 段:'home' 错误:无法匹配任何路由。网址 段:“家”

【问题讨论】:

  • 请出示您的路由配置
  • 你放了吗

标签: angular typescript angular-ui-router


【解决方案1】:

在你的dashboard-routing-module.ts中应该是这样的:

const routes: Routes = [{
  path: '',
  component: DashBoardComponent,
  children: [
   {
      path: '',
      redirectTo: 'home',
      pathMatch: 'prefix'
   },
   {
      path: 'home',
      component: HomeComponent
   }
 ]
}];

【讨论】:

  • 我在答案中看到了路线,但错误提到了“段”。什么是路段与路线?
【解决方案2】:

您必须使用此代码:

this._router.navigate(['/dashboard/home']);

如果不起作用,请在“dashboard-routing.modul.ts”文件中使用路径:'',而不是
路径:“仪表板”,。

【讨论】:

  • 你的仪表板 routeModule 必须是这样的: const routes: Routes = [ { path: '', component : DashBoardComponent, children : [ { path: '', redirectTo: 'home', pathMatch: ' prefix' }, { path: 'home', component: HomeComponent, }, ], } ];
  • 将我的代码复制并粘贴到您的仪表板 routeModule 中
  • 抱歉,它得到了修复。它似乎在标题页中我也不得不使用'/dashboard/home'..
猜你喜欢
  • 1970-01-01
  • 2018-09-21
  • 2019-10-14
  • 2020-11-17
  • 2020-07-27
  • 1970-01-01
  • 1970-01-01
  • 2018-08-22
  • 1970-01-01
相关资源
最近更新 更多