Блог

Используя угловую маршрутизацию, я пытаюсь проложить маршрут к детям, но получаю Error: Cannot match any routes. URL Segment: 'about' ошибку. Поток маршрутизации-это когда пользователь аутентифицируется, он будет перенаправляться на страницу меню, и я добавил в качестве дочернего маршрута страницу «О программе» и «Контакты». Я опубликовал свой код ниже.

приложение-маршрутизация.модули.ts

 const routes: Routes = [
  {
    path: 'menu',
    loadChildren: () => import('./pages/menu/menu.module').then( m => m.MenuPageModule),
    canActivate:[AuthGuard]
  },
  {
    path: '',
    redirectTo: 'menu',
    pathMatch: 'full'
  },
  {
    path: 'register',
    loadChildren: () => import('./pages/register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
 

и моя маршрутизация для меню-это
menu-routing.modules.ts

 const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children:[
      {
        path: '',
        loadChildren: () => import('../home/home.module').then( m => m.HomePageModule),
      
      },
      {
        path: 'about',
        loadChildren: () => import('../about/about.module').then( m => m.AboutPageModule)
      },
      {
        path: 'contact',
        loadChildren: () => import('../contact/contact.module').then( m => m.ContactPageModule)
      }
    ],
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MenuPageRoutingModule {}
 

menu.page.html

 <ion-content class="ion-padding">
    <ion-menu-toggle *ngFor="let item of menuItems">
      <ion-item
        fill="clear"
        button
        (click)="setTitle(item.title)"
        [routerLink]="item.path"
        routerDirection="root"
        routerLinkActive="active-item"
        [routerLinkActiveOptions]="{exact: true}"
      >
        {{ item.title }}
      </ion-item>
    </ion-menu-toggle>
    <ion-button color="light" (click)="logout()">LOGOUT</ion-button>
  </ion-content>
 

menu.page.ts

     export class MenuPage implements OnInit {
      menuItems = [
        {
          title: 'Home',
          path: '/'
        },
        {
          title: 'About',
          path: '/about'
        },
        {
          title: 'Contact',
          path: '/contact'
        },
        {
          title: 'Veterans',
          path: '/veteran'
        }
      ];
      title = 'Home';
constructor() { }
ngOnInit() {}
 

auth.service.ts

 async SignIn(email,password)
    {
     const loading =await this.LoadingCtrl.create({
       message:'Authenticating..',
       spinner:"crescent",
       showBackdrop:true
     });
     loading.present();
     this.afauth.setPersistence(firebase.default.auth.Auth.Persistence.LOCAL)
     .then(()=>{
       this.afauth.signInWithEmailAndPassword(email,password)
       .then((data)=>{
         if(!data.user){
           loading.dismiss();
           this.toast('Please check your credentials','warning');
           this.afauth.signOut();
         }else{
           loading.dismiss();
           this.router.navigate(['/menu']);
         }
       })
       .catch(error=>{
         loading.dismiss();
         this.toast(error.message,'danger');
       })
     })
     .catch(error=>{
       loading.dismiss();
       this.toast(error.message,'danger');
     });
    }
 

So when I try to route to about or contact page its says cannot match any routes.