Question

我试图导航到一个应该带有2个url参数的组件，但是由于某种原因，我收到一条错误消息，指出路由无法匹配

const routes: Routes = [
{
    path: 'home',
    component: HomeComponent
},
{
    path: 'home/:dataClass',
    },
    canActivate: [ProtectedRoutesGuard],
    component: DataViewerRouteComponent,
},
{ // PROBLEM ROUTE BELOW

    path: '/:dataClassName/:id',
    data: {
        name: 'Service Status'
    },
    component: DataViewerRecordsComponent,
},
{ 
    pathMatch: 'full',
    path: '',
    data: {
        name: 'Service Status',
        module: ['data-viewer']
    },
    canActivate: [ProtectedRoutesGuard],
    component: DataViewerHomeComponent,
},
{
    pathMatch: 'full',
    path: '**',
    redirectTo: '/data-viewer',
}

];

导航如下：

this.router.navigate([this.dataClassName + '/' + this.id]);

正在使用预期值填充路由，但未将其与任何路由匹配。错误消息如下：

core.js:4002 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'benchmarks/101723102'

错误：无法匹配任何路由。网址段：“ required / 1234”

Answer 1

您的路由应该看起来像这样：

this.router.navigate(['/'+this.dataClassName], {queryParams: {'id': this.id}});

，然后您需要从路由到的组件中解析queryParams。

Answer 2

navigateByUrl

使用字符串导航时，可以使用navigateByUrl。

this.router.navigateByUrl(`/${this.dataClassName}/${this.id}`);

导航

否则，当您使用navigate时，需要提供url段（由/分隔的部分）

this.router.navigate([`/${this.dataClassName}`, this.id]);

侧注：您可能不想仅在路线中使用参数

PS：如果我没记错，您不应定义以/

开头的路线

路由的角度传递参数无法匹配路由

2 个答案: