无法匹配任何路线 - Ionic 5 Angular 项目

Question

我的项目中有大约 15 个页面，我想要一个包含 2 个选项卡的页面。为了实现这一点，我在 app.

中创建了一个名为 tabs 的文件夹

这个 tab 文件夹有 3 页 - 1. project view 2. projecttasks 3. projectconversations

我按照文档中的指导在项目视图中添加了 2 和 3，但出现错误：

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projectview/tab1'

Error: Cannot match any routes. URL Segment: 'projectview/tab1'

下面是projectview-routing.module.ts代码

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

import { ProjectviewPage } from './projectview.page';

    
const routes: Routes = [
  {
    path:'projectview',
    component: ProjectviewPage,
    children:[
     {path: 'tab1', 
     //loadChildren:'./../projecttasks/projecttasks.module#ProjecttasksPageModule'
     loadChildren: () => import('../projecttasks/projecttasks.module').then( m => m.ProjecttasksPageModule)
    },
     {path: 'tab2', 
     //loadChildren:'./../projectconversations/projectconversations.module#ProjectconversationsPageModule'
     loadChildren: () => import('../projectconversations/projectconversations.module').then( m => m.ProjectconversationsPageModule)
    },
    {
      path: '',
      redirectTo: '/projectview/tab1',
      pathMatch: 'full'
    }
    ]
  },
  {
    path:'',
    redirectTo:'/projectview/tab1',
    pathMatch: 'full'
  }
  
];




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

projectview.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

我也评论了来自app-routing.module.ts

的标签页路由

  // {
  //   path: 'projecttasks',
  //   loadChildren: () => import('./tabs/projecttasks/projecttasks.module').then( m => m.ProjecttasksPageModule)
  // },
  // {
  //   path: 'projectconversations',
  //   loadChildren: () => import('./tabs/projectconversations/projectconversations.module').then( m => m.ProjectconversationsPageModule)
  // }

我错过了什么？

编辑 1

我什至试过在 pageview.module.ts 中调用这样的路径，但效果不佳

 {path: 'tab1', 
 //loadChildren:'./../projecttasks/projecttasks.module#ProjecttasksPageModule'
 loadChildren: () => import('../projecttasks/projecttasks.module').then( m => m.ProjecttasksPageModule)
},
 {path: 'tab2', 
 //loadChildren:'./../projectconversations/projectconversations.module#ProjectconversationsPageModule'
 loadChildren: () => import('../projectconversations/projectconversations.module').then( m => m.ProjectconversationsPageModule)
},

Answer 1

只需删除路径中的正斜杠

path:'',redirectTo:'projectview/tab1'

无法匹配任何路线 - Ionic 5 Angular 项目

Cannot match any routes - Ionic 5 Angular project

typescript

ionic-framework

angular

ionic4

编辑 1