Question

可以使用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上是这样。如果你从家里开始，浏览到A，然后浏览到B，再浏览到C，然后右键单击后退按钮，你会看到：

Page C（点击它会带你到B页）
Page B（点击它会带你到A页）
页面A（点击它会带你到主页）

我想要的是：

Page B（点击它会带你到B页）
Page A（点击它会带你到A页）
主页（点击它会带你回家）

如果您向后按几次然后右键单击向前，则前向历史记录正常工作（但不是后退历史记录）。

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

Answer 1

您可以随时使用模板＆＃39;反应特性。在<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之类的反应性数据源。祝你好运！

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

1 个答案: