时间戳

首页 > 解决方案 > 在 Angular8 的动态视图中添加友好的 Url 以使用 SEO

angular - 在 Angular8 的动态视图中添加友好的 Url 以使用 SEO

问题描述

我正在使用 Angular 路由在视图之间切换。

我的 Angular 版本是"@angular/core": "~8.0.0"

这就是今天的做法：

www.mywebsite.com.br

当我选择一些视图时，我从服务器加载数据以显示信息，并且 URL 看起来像这样：

www.mywebsite.com.br/course/1

但是，要在我的网站中使用 SEO，我需要在 URL 中显示课程的标题，如下所示：

www.mywebsite.com.br/how-to-use-a-computer

当我在本课程中导航时，我需要创建路径，如下所示：

www.mywebsite.com.br/how-to-use-a-computer/my-first-class

这，我的路线：

const routes = [

  {path: 'manufacturer/:id_ manufacturer', component: ManufacturerComponent},

  {path: 'course/:id_course', component: CourseComponent},

  {path: 'category/:id_ category', component: CategoryComponent},

  {path: 'course/:id_course/class/:id_ class', component: ClassComponent},
];

反正有改网址吗？

标签： angulartypescriptseourl-routingangular8

解决方案

检查您的模块导入，#可以通过提供{ useHash: false }作为的第二个参数来禁用RouterModule.forRoot：

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: false })  // set it as false to disable the #
]

这是您可能覆盖您的 的地方LocationStrategy，默认为PathLocationStrategy（没有哈希的那个）。另一个选项是HashLocationStrategy，它的行为与您描述的一样（带有#）。您可以LocationStrategy在Angular 文档中了解更多信息。

推荐阅读