page.js使examples/hash与hashbang:true一起工作

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

本文关键字：hashbang true 一起 工作 hash js examples page      更新时间：2023-09-26

这个问题说明了一切。我试图使page.js示例中examples/hash/下的示例以相同的方式工作，只使用{ hashbang: true }选项，但没有效果。

我也尝试过设置<base href="/hash/">，但这似乎会导致无限重定向。在那之后，删除page.base('/hash')似乎起到了作用，但随后位置栏显示http://localhost:4000/hash/#!/hash/，#和#subsection链接停止正常工作。

这是代码：

<!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>

我该怎么做？感谢

我遇到了同样的问题，找不到解决方案。我最终使用了一种巧妙的变通方法。

如果不必支持旧的浏览器，您可以使用history.pushState推送url的正确版本。

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

这表面上解决了这个问题，但深入链接到复杂的路径需要更多的逻辑。

相关文章：