带参数和 SEO 优化的角度路线

Question

我目前面临 Angular 应用的 SEO 优化问题。 我有一个主要组件，它有一堆到报告页面的链接，看起来像这样 报告/测试1，报告/测试2，报告/测试3，... 此时的路由看起来是这样的：

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 }
];

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

Answer 1

这个解决方案的问题：

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

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

对我来说，正确的做法是在路由中使用带参数的路由系统，像这样：

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

根据您的“姓名”，您可以随意设置/显示数据。