角度路由网址问题

时间:2020-10-20 11:59:32

标签: angular

我只是在练习路由。我只想简单地显示点击页面,但显示错误

Error: Cannot match any routes. URL Segment: 'dashboard/eCommerce'

这是我的项目结构

enter image description here

在登录页面上,我使用点击功能来显示其他类似页面

login(){
    this.router.navigate(['/dashboard/eCommerce']);
}

仪表板路由模块

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { EcommerceComponent } from "./eCommerce/eCommerce.component";
    
    const routes: Routes = [
      {
        path: '',
        children: [
          {
            path: 'eCommerce',
            component: EcommerceComponent,
            data: {
              title: 'eCommerce'
            }
          },
        ]
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class DashboardRoutingModule { }

This is my app-routing module

const appRoutes: Routes = [
  {
    path: '',
    component: LoginPageComponent,
    pathMatch: 'full',
  },

    {
    path: 'register',
    component: RegisterPageComponent,
    pathMatch: 'full',
  },
  { path: '', component: FullLayoutComponent, data: { title: 'full Views' }, children: Full_ROUTES, canActivate: [AuthGuard] },
  { path: '', component: ContentLayoutComponent, data: { title: 'content Views' }, children: CONTENT_ROUTES, canActivate: [AuthGuard] },
];

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

export class AppRoutingModule {

}

在应用程序路由模块中,我的登录页面被直接打开(表示其第一页),然后我需要在按钮上单击登录,我需要显示仪表板/电子商务,但不知道为什么它显示错误

2 个答案:

答案 0 :(得分:1)

从您的代码中,我看不到路径/dashboard/eCommerce的存在方式,因为未在某处提到仪表板(通过模块名称隐式除外)。

您可能想要这样:

const routes: Routes = [
      {
        // This would define the path to be named 'dashboard'.
        path: 'dashboard',
        children: [
          {
            path: 'eCommerce',
            component: EcommerceComponent,
            data: {
              title: 'eCommerce'
            }
          },
        ]
      }
    ];

答案 1 :(得分:0)

尝试一下:

      login(){
    this.router.navigate(['/eCommerce']);
}