带参数的角度路径与SEO优化

Question

我目前正面临一个问题，与搜索引擎优化的角度应用程序。我有一个主要组件，其中有一堆链接到报告页面，看起来像这个报告/test1，报告/test2，报告/test3，...此时的路由如下所示：

const routes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page1', component: Page1Component },
  { path: 'report/:name', component: ReportComponent }
];

因此，根据报告的名称，我会在该页面上显示不同的内容(报告)。我需要有单独的一组元标签和每个报告显示的标题。所有可能的报告名称都是已知的，所以我的想法是为每个报告创建一条路由，如下所示

const routes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page1', component: Page1Component },
  { path: 'report/test1', component: ReportComponent },
  { path: 'report/test2', component: ReportComponent },
  { path: 'report/test3', component: ReportComponent }
];

然后在组件内部，根据路由显示不同的meta标记，但我不确定它是否会被正确解释。我已经为应用程序使用了服务器端渲染。有没有人知道是否可以用不同的方法来做，或者这种方法是否会奏效？我根本不确定我的方向是对的。谢谢!

Answer 1

这个解决方案的问题是：

{ path: 'report/test1', component: ReportComponent },
{ path: 'report/test2', component: ReportComponent },
{ path: 'report/test3', component: ReportComponent }

你没有利用路由系统的优点，而且每次你有新的报告要管理时，你都会复制你的路由。

对我来说，正确的方法是在路由中使用带有参数的路由系统，如下所示：

{ path: 'report/:name', component: ReportComponent }

根据你的“名字”，你可以设置/显示你想要的数据。