在 Polymer 1.1 中使用 window.location.href 的正确方法

Question

在索引的头部我有：

  // hashbang is set to true in routing.html
  <script type="text/javascript">
   if (window.location.href === "/users") {
    console.log('Hey you!');
   }
  </script>

我需要基于 window.location 实施一些 class 绑定，但我正在测试以确保它在聚合物中有效。可以？我不为我工作。当我转到 localhost:3000/#!/users 时，在控制台中注意到。

Answer 1

更新：

如果您将 page.js 与 Polymer 初学者工具包一起使用，那么您应用的所有页面都会在第一次加载时加载。

在此入门工具包中，使用Page.js更改路由将显示需要的页面并添加display: none隐藏其他页面。

例如，在您的 app/index.html 中，您应该有这样的内容：

<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
  <section data-route="home">
      ...
  </section>


  <section data-route="users">
    ...
  </section>

  <section data-route="user-info">
    ...
  </section>
...
</iron-pages>

iron-pages 元素上的 route 参数由 app/elements/routing.html 中的 Page.js 设置：

page('/', function () {
  app.route = 'home';
});

page('/users', function () {
  app.route = 'users';
});

page('/users/:name', function (data) {
  app.route = 'user-info';
  app.params = data.params;
});

page('/contact', function () {
  app.route = 'contact';
});

因此，如果路由匹配 /users，则 Page.js 将设置 app.route = 'users';，并且 iron-pages Polymer 元素将显示带有 data-route="users" 和隐藏其他的而不重新加载任何东西，因此不会重新加载您的脚本。

但实际上，因为您使用的是 Page.js，将您的代码集成到 routing.html 文件中会更容易，如下所示：

page('/users', function () {
  app.route = 'users';
  console.log('Hey you!');
});

page('/users/:name', function (data) {
  app.route = 'user-info';
  app.params = data.params;
  console.log('Hey ' + data.params.name);
});

page('/contact', function () {
  app.route = 'contact';
  console.log('Contact page');
});

您可以从尝试调试开始，例如，尝试记录 window href:

console.log(window.location.href);

哪个应该return：

http://localhost:3000/#!/users

这样您就可以更深入地了解您的问题所在！ ;)

确实，window.location.href 为您提供了完整的 URL，并且它应该这样做（无论是否使用 Polymer）。

另一方面，window.location.hash return 是 url 中的所有内容，从 # 字符开始，给你 #!/users，所以你可以尝试：

<script type="text/javascript">
// Slice(2) to get rid of '#!'
if (window.location.hash.slice(2) === "/users") {
  console.log('Hey you!');
}
</script>

旁注：

如果在#之后有查询参数，像这样：
localhost:3000/#!/users?number=42&name=value

window.location.href 将是 #!/users?number=42&name=value

如果在这种情况下您还想去掉查询参数 ?number=42&name=value，您可以这样写：

<script type="text/javascript">
   if (window.location.hash.slice(2).split("?")[0] === "/users") {
    console.log('Hey you!');
   }
</script>

在 Polymer 1.1 中使用 window.location.href 的正确方法

Correct way to use window.location.href in Polymer 1.1

javascript

polymer

polymer-1.0