在 Angular8 的 Dynamic Views 中添加友好的 Url 以使用 SEO

Question

我正在使用 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},
];

反正有改URL?

Answer 1

检查您的模块导入，可以通过提供 { useHash: false } 作为 RouterModule.forRoot:

的第二个参数来禁用 #

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

您可能在这里覆盖了 LocationStrategy，它默认为 PathLocationStrategy（没有散列的那个）。另一个选项是 HashLocationStrategy，它的行为与您描述的一样（带有 #）。您可以在 Angular documentation.

中阅读有关 LocationStrategy 的更多信息

在 Angular8 的 Dynamic Views 中添加友好的 Url 以使用 SEO

Adding a friendly Url in Dynamic Views of Angular8 to use SEO

angular

typescript

seo

url-routing

angular8