简体   繁体   English

page.js使示例/哈希与hashbang一起使用:true

[英]page.js make examples/hash work with hashbang: true

The question says it all. 问题说明了一切。 I'm trying to make the example under examples/hash/ in the page.js examples work the same way it does, only using the { hashbang: true } option, but no avail. 我正在尝试使page.js示例中的examples/hash/下的examples/hash/以相同的方式工作,仅使用{ hashbang: true }选项,但无济于事。

I've also tried setting <base href="/hash/"> , but that seems to get into an infinite redirection. 我也尝试设置<base href="/hash/"> ,但这似乎陷入了无限重定向。 After that, removing page.base('/hash') seems to do the trick, but then the location bar displays http://localhost:4000/hash/#!/hash/ and the # and #subsection links stop working properly. 之后,删除page.base('/hash')似乎可以解决问题,但是位置栏显示http://localhost:4000/hash/#!/hash/ ,并且##subsection链接停止正常工作。

This is the code: 这是代码:

<!DOCTYPE html>
<html>
  <head>
    <title>Hash</title>
    <style>
      body p {
        color: #333;
        font-family: verdana;
      }
      #sections p {
        height: 500px;
        margin: 30px;
        padding: 30px;
        line-height: 40px;
        background-color: #eee;
        border: 1px solid #ccb;
        font-size: 30px;
      }

      #sections p a {
        display: block;
        float: right;
        font-size: 14px;
      }

    </style>
    <script src="/page.js"></script>
  </head>
  <body>
    <h1 id="top">Hash</h1>

    <ul>
      <li><a href="#">#</a></li>
      <li><a href="#subsection">#subsection</a></li>
      <li><a href="section?name=tana">section?name=tana</a></li>
      <li><a href="section?name=tana#subsection">section?name=tana#subsection</a></li>
    </ul>

    <div id="sections">
      <p><strong>A</strong><a href="#top">top</a></p>
      <p><strong>B</strong><a href="#top">top</a></p>
      <p id="subsection"><strong>C</strong><a href="#top">top</a></p>
    </div>

    <script>
      page.base('/hash');
      page('/:section', section);
      page();

      function section(ctx, next) {
        console.log('path: ', ctx.path);
        console.log('querystring: ', ctx.querystring);
        console.log('hash: ', ctx.hash);
        console.log(' ');
      }
    </script>
  </body>
</html>

How can I do this ? 我怎样才能做到这一点 ? Thanks 谢谢

I'm having the same problem and couldn't find a solution. 我遇到了同样的问题,找不到解决方案。 What I ended up doing was use a hacky workaround. 我最终要做的是使用一种变通的解决方法。

You can push the correct version of your url using history.pushState if you don't have to support old browsers. 如果不必支持旧的浏览器,则可以使用history.pushState推送正确版本的URL。

history.pushState('','',location.pathname + location.search);

This cosmetically fixes the problem, but deep linking to complex paths will require a bit more logic. 从表面上看,这可以解决问题,但是深入链接到复杂路径将需要更多逻辑。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM