具有参数和SEO优化的角度路线

Question

我目前面临Angular应用程序SEO优化的问题。我有一个主要组件，它有很多到报告页面的链接，看起来像这样report/test1，report/test2，report/test 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 }

根据您的"姓名"，您可以随心所欲地设置/显示数据。