如何让 Prerender.io 在没有明确设置路由时识别唯一页面？

Question

我计划使用 Prerender.io 将我的 SPA（使用 AngularJS 构建）变成缓存页面的集合。 app/website 是多语言（英语和法语），我正在使用 Angular Dynamic Locale 来处理语言切换。与菜单项不同，切换器中的语言 link 不包含带有路由路径的 href，而是绑定到控制器，该控制器基本上更新变量并重新加载路由。

我的问题是：如何让 Prerender.io 识别没有明确设置路由的唯一页面？当然我的目标是让每个页面的法语版本单独缓存。

目前我正在连接到语言切换器的控制器中设置一个查询参数（见下面的片段）。这是由 ng-click 上的函数触发的。 Prerender.io 会把它作为一个单独的页面吗？

（我的理解是 Prerender.io 确实将带有查询参数的 route/path 视为单独的页面，除非被告知明确忽略它；我的问题更多是关于是否在控制器而不是锚标签可能会改变事情。）

这是语言切换器的模板标记：

<nav class="lang-switcher" ng-controller="LanguageCtrl">
  <a href ng-click="changeLanguage('en')" ng-class="{current: language == 'en'}">English</a>
  <a href ng-click="changeLanguage('fr_FR')" ng-class="{current: language == 'fr_FR'}">Français</a>
</nav>

控制器（我删除了与问题无关的代码）：

.controller('LanguageCtrl', ['$scope', '$route', '$location', function ($scope, $route, $location) {

  $scope.changeLanguage = function(lang) {

    // Do some stuff.

    // If the page is in French, attach query parameter to the URL.
    $location.path($location.path()).search({'lang': ( lang == 'fr_FR' ? 'fr' : null )});

    $route.reload();
  };
}])

当然，一旦页面被缓存为静态，问题就变成了切换器 links 会发生什么。但是一次有一个障碍... :)

提前致谢！

Answer 1

抓取工具不会点击 link，因此您需要在此处填充 href 标记。这样他们的爬虫将解析 link 然后向不同的 link.

发出另一个请求

<nav class="lang-switcher" ng-controller="LanguageCtrl">
  <a href="/path?lang=en" ng-click="changeLanguage('en')" ng-class="{current: language == 'en'}">English</a>
  <a href="/path?lang=fr" ng-click="changeLanguage('fr_FR')" ng-class="{current: language == 'fr_FR'}">Français</a>
</nav>

如果您不告诉 Prerender.io 忽略它，Prerender.io 将使用不同的查询参数单独缓存 URL，您是正确的。

如何让 Prerender.io 在没有明确设置路由时识别唯一页面？

How to get Prerender.io to recognize a unique page when it does not have a route explicitly set?

prerender

angularjs