javascript - 如何正确实现带id的路由？

Question

我想在页面之间使用 Id 进行路由。我使用 [routerLink] 这样做。但是当我运行该应用程序时出现错误:Error: Cannot find module '../friend/friend-details.module'。我想我没有正确输入路径，但我不知道我可以进一步尝试什么。所以我想导航到 friend 详细信息并传递 id，以便它知道它是哪个项目。 friend-details 文件夹位于 friend 文件夹中，因此该路径应该有效。

页面.html

 <ion-card *ngFor="let friend of loadedFriends">
 <ion-avatar  [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>

tabs.router.module.ts

   const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,  //render component that holds your tabs
        children: [
           {
        path: 'friend',
        children: [
          {
            path: '',
            loadChildren: '../friend/friend.module#FriendPageModule'
          },
          {
            path: ':friendId',
            loadChildren: '../friend/friend-details.module#FriendDetailsPageModule'  //maybe delete the same page of app.module.ts
          },
        ]
      },

编辑:

我尝试了一种使用点击事件的解决方案:

openFriendDetails() {
    this.router.navigate(['friend/:id']);
  }

我从 app-routing.module.ts 获取访问权限

{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },

此更改后导航有效。但不知何故，我无法使用我的 ID，因为 friend 详细信息页面不知何故被卡住，我无法再更改我的页面。

Answer 1

首先你需要把你的children改成这个

children: [
          {
            path: '',
            pathMatch: 'full',
            loadChildren: '../friend/friend.module#FriendPageModule'
          },
          {
            path: ':friendId',
            loadChildren: '../friend/friend-details.module#FriendDetailsPageModule'  //maybe delete the same page of app.module.ts
          },
        ]

然后你还需要在你的 FriendDetailsPageModule 路由中添加 path: '', component: yourcomponent