预渲染 Angular 6（用于 SEO）不会将 routerLink 转换为 Href答案

【问题标题】：Prerendering Angular 6 (for SEO) does not translate routerLink to Href预渲染 Angular 6（用于 SEO）不会将 routerLink 转换为 Href
【发布时间】：2019-08-21 08:26:48
【问题描述】：

我正在使用 prerender.io 使用 headless chrome 渲染 6 个角页面。问题是渲染器不渲染路由器链接，导致链接信息丢失。

考虑到渲染的目的是 SEO，这尤其成问题。

例如，带有 [routerLink]="previewLink" 的按钮将被渲染为没有路由器链接的按钮。

这是一个活生生的例子

没有链接的渲染页面

https://prerender.io/raw-html?url=https%3A%2F%2Fwww.fiveabook.com%2Fbooks&adaptiveType=desktop

“预览”按钮中没有 href 和路由器链接：

<button _ngcontent-c12="" color="accent" mat-button="" tabindex="0" class="mat-button mat-accent ng-star-inserted"><span class="mat-button-wrapper">

带有路由器链接的角页面

https://www.fiveabook.com/books

按钮具有动态生成的路由器链接。

最初，问题是关于 href 链接的。但是，这些按钮没有 href 链接。不过，渲染不会在预览按钮中呈现路由器链接，因此我不确定 googlebot 是否可以看到按钮链接到的位置。

【问题讨论】：

A button 元素没有 href 属性...
你是对的。但是，它们在渲染版本中也没有路由器链接。这是否意味着链接信息丢失了？
内部存储了routerLink关联的路径，点击按钮生成并访问URL
那不是说当我们点击渲染页面中的Preview按钮时，我们应该访问url吗？（就像它在实时页面上一样）
见angular.io/api/router/RouterLink和angular.io/api/router/RouterLinkWithHref

标签： angular prerender

【解决方案1】：

Html 按钮没有 href 属性。如果您想生成超链接按钮，只需使用锚元素。

<a mat-button [routerLink]="...">
Link
</a>

【讨论】：

用替换

【解决方案2】：

如果我直接在我的 Mac 上的 Chrome 浏览器中加载 https://www.fiveabook.com/books 并查找该按钮，我也看不到 href：

所以看起来我们正在渲染页面，就像普通 Chrome 浏览器正在渲染它一样。

【讨论】：

您所指的路由器链接未绑定到变量，并且可以正常工作。但是，预览按钮中绑定到变量的路由器链接似乎消失了。