删除 URL (fullpage.js) 中的散列

Question

我正在使用插件fullpage.js

我想要像 example.com/sectionname.

这样干净的 URL，而不是像 example.com/#sectionname) 这样的部分的哈希 url

该插件不提供此选项，但我很好奇是否有足够简单的方法来实现这一点。

更新 1： 我试过这个回调：

onLeave: function(index, nextIndex, direction) {
    if (nextIndex == 2) {
        history.replaceState(null, null, "/about")
    }
}

还有这个：

afterLoad: function(anchorLink, index) {
    if (index == 2) {
        history.replaceState(null, null, "/about");
    }
}

但是，当我滚动到第二部分时，URL 是这样的：www.example.com/about/#about。

我也试过这个代码：

function locationHashChanged() {
    if (location.hash === "#about") {
        history.replaceState(null, null, "/about");
    }
}
window.onhashchange = locationHashChanged;

但是，当加载新部分时，哈希会在更改为非哈希之前短暂显示 URL。

Answer 1

您可以随时使用 HTML 5 历史记录 API。您可以为此使用 onLeave 或 afterLoad 等回调：

$('#fullpage').fullpage({
    afterLoad: function(anchorLink, index) {
        history.pushState(null, null, "bar.html");
    }
});

考虑到您需要为旧浏览器使用一些 polyfill。或者直接使用history.js。

请注意，上面的示例在某些浏览器的本地主机上可能不起作用。你最好在服务器上试试。

删除 URL (fullpage.js) 中的散列

Remove hash in URL (fullpage.js)

javascript

jquery

url-rewriting

single-page-application

fullpage.js