Question

我尝试使用Ionic 4（带有Angular 7.3.1的4.10.2）登录后才能访问应用程序。在遵循了本教程（https://devdactic.com/ionic-4-login-angular/）之后，我无法进入应用程序的使用“离子标签”的部分。 Chrome总是在控制台日志中显示以下内容：“未捕获（承诺）：错误：无法匹配任何路由。URL段：'members / tab1'”

该应用将使用Laravel后端，我想使用令牌来保护连接。但是到目前为止，我仅使用教程中的模拟令牌。当我尝试链接到其他任何东西时，然后登录后的选项卡都可以正常工作，但这并不能真正解决我的问题。

在app-routing.module.ts中路由：

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './public/register/register.module#RegisterPageModule' },
  {
    path: 'members',
    canActivate: [AuthGuard],
    loadChildren: './members/member-routing.module#MemberRoutingModule'
  },

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

member-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'message', loadChildren: './message/message.module#MessagePageModule' },
  { path: 'playerview', loadChildren: './playerview/playerview.module#PlayerviewPageModule' },
  { path: 'playerlist', loadChildren: './playerlist/playerlist.module#PlayerlistPageModule' },
  { path: 'teamview', loadChildren: './teamview/teamview.module#TeamviewPageModule' },
  { path: 'teamlist', loadChildren: './teamlist/teamlist.module#TeamlistPageModule' },
  { path: 'teammanagement', loadChildren: './teammanagement/teammanagement.module#TeammanagementPageModule' }
];

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

来自app.component.ts的InitialiseApp：

initializeApp() {
  this.platform.ready().then(() => {
    this.statusBar.styleDefault();
    this.splashScreen.hide();
    this.authenticationService.authenticationState.subscribe(state => {
      if (state) {
        this.router.navigate(['members', 'tabs']);
      } else {
        this.router.navigate(['login']);
      }
    });
  });
}

在tabs.router.module.ts中路由：

const routes: Routes = [
  {
    path: 'tabs',
    canActivate: [AuthGuard],
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            canActivate: [AuthGuard],
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            canActivate: [AuthGuard],
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            canActivate: [AuthGuard],
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: 'tab4',
        children: [
          {
            path: '',
            canActivate: [AuthGuard],
            loadChildren: '../tab4/tab4.module#Tab4PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    canActivate: [AuthGuard],
    redirectTo: '/members/tabs/tab1',
    pathMatch: 'full'
  }
];

login.page.html中的我的模拟登录按钮：

<ion-button (click)="login()" expand="block"  routerLink="../members/tab1">Login</ion-button>

单击“登录”按钮后，我希望模拟登录记住您已登录，并且可以看到选项卡导航和页面。

如果我应该添加auth.guard.ts或其他内容，请告诉我。预先感谢！

Answer 1

我认为您需要将routerLink中的链接更改为../members/tabs/tab1。

登录后导航至标签页时如何解决“错误：无法匹配任何路线”？

1 个答案: