0

我正在进入 SPA 编程，并且有一个带有 page.js 的工作应用程序。我搜索了 stackoverflow 和 page.js，但无法弄清楚在重新加载页面（或在共享或添加书签后加载）时如何处理 /record/Name1 之类的 URL 请求。

我看到的唯一方法是使用历史 API 并引用像 record.php?id=name 这样的文件。但我相信在 stockoverflow 上有更好/更漂亮的方法。有人可以为我指出下一步的教程或示例。我想避免使用 jquery 之类的框架（但会使用 Polymer）。

这是我的测试代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Page.js test</title>
    </head>

    <body style="font-family: sans-serif;">
        <h2>Menu:</h2>
        <div>
            <a href="/">Home</a><br>
            <a href="/records">Records</a><br>
            <a href="/record/Name1">Record/Name1</a><br>
            <a href="/record/Name2">Record/Name2</a><br>
            <a href="/index_1.html" rel="external">external</a><br>
        </div>
        <hr>
        <h2>Content:</h2>
        <p id="main"></p>
    </body>

    <script src="bower_components/page/page.js"></script>
    <script>
        page('/', function () {
            document.getElementById("main").innerHTML = "Home";
        });
        page('/records', function () {
            document.getElementById("main").innerHTML = "Records";
        });
        page('/record/:name', function (ctx) {
            document.getElementById("main").innerHTML = ctx.params.name;
            //history.pushState(null, null, ctx.params.name);
        });
        page({
            hashbang: false // do not add #! before urls
        });
    </script>
</html>

谢谢您的帮助。

4

0 回答 0