Question

我正在尝试使用Ionic Framework创建我的第一个应用程序，但遇到了麻烦。我想在我的标签页页面之前有一个登录页面，这是我应用程序的主屏幕，而且我总是遇到同样的URL错误。错误：无法匹配任何路线。网址段：“ tabs / tab1” 错误：无法匹配任何路线。网址段：“ tabs / tab1”

app-routing.module.ts

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

const routes: Routes = [

  { 
    path: '', 
    loadChildren: './login/login.module#LoginPageModule' 
  },

  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts

import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

login.page.ts

import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(public router: Router) { }

  ngOnInit() {
  }

  toTabs(){
    this.router.navigateByUrl('/tabs')
  }

}

login.page

HTML文件只有一个与onClick事件toTabs（）链接的离子按钮。

我试图导航到“ / tabs”，“ / tabs / tab1”和“ tabs”，但我绝望了。如果有人可以帮助我，我将非常感激。

Answer 1

设置返回到tabs模块的默认路由。如果要在应用程序中显示标签栏，请将route放在tabs.router.module.ts中的标签下。如果不想显示标签栏，请将路线放置在app-routing.module.ts中。

app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) },
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule) }
]

您应该创建一个AuthService，用于保存用户详细信息。您在此处放置一个登录功能，如果找到用户，则在变量currentUser中设置用户详细信息。现在，如果您在其他页面中导入此AuthService，则可以在您的应用中访问用户。

export class AuthService {
  currentUser: User;

  // place access functions here
}

在应用程序的入口点： app.component.ts 。控制是否为用户设置了用户详细信息。如果是这样，请转到主页，否则请转到登录页面。

initializeApp() {
  this.platform.ready().then(() => {     
    this.authService.currentUser ? this.router.navigateByUrl('') :   this.router.navigateByUrl('/login');
  });
}

从登录页面到选项卡页面

1 个答案: