在 Iron-Router 中设置 HTML 标题而不会弄乱浏览器历史记录答案

【问题标题】：Set HTML title in Iron-Router without messing up browser history在 Iron-Router 中设置 HTML 标题而不会弄乱浏览器历史记录
【发布时间】：2015-01-24 11:32:45
【问题描述】：

可以使用onAfterAction 在 Iron-Router 中设置每个路由的 HTML 标题：

Router.route("home", {
  path: "/",
  template: "home",
  onAfterAction: function () {
    document.title = "Home";
  }
});

Router.route("pageA", {
  path: "/page/a",
  template: "pageA",
  onAfterAction: function () {
    document.title = "Page A";
  }
});

Router.route("pageB", {
  path: "/page/b",
  template: "pageB",
  onAfterAction: function () {
    document.title = "Page B";
  }
});

Router.route("pageC", {
  path: "/page/c",
  template: "pageC",
  onAfterAction: function () {
    document.title = "Page C";
  }
});

但是，这会导致回溯历史混乱，至少在 Chrome 上是这样。如果您从 Home 开始，浏览到 A，然后到 B，然后到 C，然后右键单击返回按钮时，您会看到：

页面 C（点击它会转到页面 B）
页面 B（点击它会转到页面 A）
页面 A（单击它会带您到主页）

我想要的是：

页面 B（点击它会转到页面 B）
页面 A（点击它会转到页面 A）
首页（点击它会带您进入首页）

如果您按几次后退然后右键单击前进，前进历史可以正常工作（但不是后退历史）。

还有其他方法可以设置支持回溯历史的 HTML 标题吗？使用onBeforeAction 或onRun 代替onAfterAction 并不能解决问题。

【问题讨论】：

标签： meteor iron-router

【解决方案1】：

您始终可以利用模板的反应性属性。在你的<head> 标签中：

<head>
  <title>My App {{#if extraTitle}}| {{extraTitle}}{{/if}}
</head>

然后从这里，您可以通过多种方式向extraTitle 注入价值。我的最爱之一是创建一个全局助手：

Template.registerHelper('extraTitle', function() {
      // do something.
});

做某事可能有多种可能性。最简单的应该是Session.get:

Template.registerHelper('extraTitle', function() {
      return Session.get("extraTitle");
});

因此，您可以在 onAfterActions 或任何您需要的地方使用以下内容来设置标题。

Session.set("extraTitle", "current page.");

正如我所提到的，除了Session，还有多种方法可以做到这一点，只要它是像ReactiveVar 这样的反应性数据源。祝你好运！

【讨论】：

不幸的是 <head> 不是一个合适的反应模板。看到这个meteorpad（点击右上角的箭头在新标签页中打开）