pushState

Question

这是我的代码：

$("a").on("click", function(event) {

    var refrence = $(this).attr("href");
    window.history.pushState( {}, "", refrence );
    event.preventDefault();

});

现在如果我第一次点击锚点，假设它的 href 是：http://example.com/pages/about ,

URL修改正确；但是如果我下次点击这个锚点：http://example.com/pages/contact ,

URL 在浏览器上会变成：http://example.com/pages/pages/contact ,

您看到 /pages 目录第一次没有从 URL 中清除。我该如何解决这个问题？

编辑：

<a href="pages/about.html" class="ajax">About</a>
<a href="pages/contact.html" class="ajax">Contact</a>

这是我正在处理的HTML。

//  ajax
var $main = $("main");

$(".ajax").on("click", function(event) {

    var refrence = $(this).prop("href");
    var myAjax = function() {
        $main.load(refrence);
    };
    window.history.pushState(myAjax(), "", refrence);

    event.preventDefault();

});

这是我正在使用的 JS 完整功能。

我也在本地主机上工作。

Answer 1

使用绝对 URL，如 /pages/about.html（带前导斜线）而不是相对 URL，如 pages/about.html，或提供 base 元素，如 <base href="/">.

否则，一旦导航（通过静态转到 link 或在 JS 中使用 history.pushState()），相对 link 将根据更新的当前目录解析（/pages/ + pages/about.html = /pages/pages/about.html, 等等).

pushState - 从 href 中删除父目录？

pushState - Remove parent directory from href?

javascript

jquery