Question

比方说，在我们的英雄Angle 7 / ionic 4英雄应用中，我们有一个HeroDetailsRoutingModule，带有两个标签，SuperpowersPage和CostumePage。

现在，我们想将SuperpowersPage定义为默认标签。

所以我试图设置我的HeroDetailsRoutingModule：

const routes: Routes = [
    {
        path: 'tabs/',
        component: HeroDetailsPage,
        children: [
            {
                path: 'superpowers',
                loadChildren: './superpowers/superpowers.module#SuperpowersPageModule'
            },
            {
                path: 'costume',
                loadChildren: './costume/costume.module#CostumePage'
            },
            {
                path: '',
                redirectTo: '/heroes/:heroId/tabs/superpowers',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/heroes/:heroId/tabs',
        pathMatch: 'full'
    }
];

这当然是行不通的，因为此模块中没有:heroId。在这种情况下重定向的正确方法是什么？我尝试做一个相对路径（例如redirectTo: './tabs/superpowers'），但这也不起作用。我有犯一些明显错误的感觉，但我不明白。预先感谢！

Answer 1

我认为，如果您将：heroId传递给路径“超级大国”，它应该可以工作。尝试此操作会发生什么...

const routes: Routes = [
    {
        path: 'tabs/',
        component: HeroDetailsPage,
        children: [
            {
                path: 'superpowers/:heroId',
                loadChildren: './superpowers/superpowers.module#SuperpowersPageModule'
            },
            {
                path: 'costume',
                loadChildren: './costume/costume.module#CostumePage'
            },
            {
                path: '',
                redirectTo: '/heroes/:heroId/tabs/superpowers',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/heroes/:heroId/tabs',
        pathMatch: 'full'
    }
];

Answer 2

我通过这种方式解决了问题

在HeroDetailsRoutingModule中，将路线定义为

 const routes: Routes = [
    {
        path: 'tabs',
        component: HeroDetailsPage,
        children: [
            {
                path: 'superpowers',
                children:[
                 { path : ':heroId',
                  loadChildren: './superpowers/superpowers.module#SuperpowersPageModule'
                 }
                ]
            },
            {
                path: 'costume',
                loadChildren: './costume/costume.module#CostumePage'
            }
        ]
    },
    {
        path: '',
        redirectTo: 'tabs/superpowers',
        pathMatch: 'full'
    }
];

在hero-details.page.ts中设置heroId的值

heroId =  <value>// get the value of heroId

然后在hero-details.page.html文件访问选项卡中以

开头

<ion-tab-button tab="superpowers/{{heroId}}">

Ionic 4：使用id参数重定向到路由

2 个答案: