使用ajax加载动态内容后如何制作“漂亮” URL

如何解决使用ajax加载动态内容后如何制作“漂亮” URL

我目前正在开发一个网站，该网站将使用由散列更改触发的ajax动态加载页面内容。

代码看起来像这样

        $("*").delegate("a","click",function () {

            // Trigger Hash Change
            window.location.hash = $(this).attr("href");

            return false;
        });

        $(window).bind('hashchange',function () {

            let newHash = window.location.hash.substring(1);

            $("#main-content").load(newHash + " #ajax-content",function (responseTxt,statusTxt,xhr) {

            }).hide().fadeIn();
        });

基本上我现在正在使URL看起来“漂亮”，我已经修改了.htaccess文件以删除.html扩展名

因此，URL看起来像这样

www.example.com/about.html

将成为这个

www.example.com/about

如果我浏览网站的索引（主页）“ www.example.com”页面，然后从那里导航到“关于”页面，则URL看起来不错。 “ www.example.com＃about”，因为服务器未在URL中显示“索引”。

但是，如果我像这样www.example.com/about那样直接导航到About页面，则从About页面转到另一个页面，例如联系页面。我得到的URL像这样www.example.com/about#contact。 www.example.com#contact应该是这样。

我的问题是处理此问题的最佳方法是什么？我应该使用jquery将所有内容重定向到索引页面，然后添加哈希值以加载正确的内容吗？还是有某种方法我无法显示URL的不必要部分？

我希望我的问题很清楚，我是涉及.htaccess文件的服务器端知识的新手。还是我从CSS技巧学到了本教程的ajax内容

https://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

解决方法

您可以使用history.pushState

window.history.pushState("object or string","Title","/new-url");

该网址将为www.example.com/new-url

实际上，使用此方法后您可以获得history.state。

console.log(window.history.state)

输出应为"object or string"

您可以看到文档here。

请记住使用/覆盖整个路径。

要做我想做的事，只需将URL覆盖到/并设置哈希即可。

,

这可能不是最好的方法，但是我设法将任何页面重定向到主页，然后将/替换为哈希值，以使该站点不会出现“混乱”的URL。

    if(window.location.pathname != "/home.html")
    {
        window.location.replace("home.html" + window.location.pathname.replace("/","#"));
    }

如果用户导航到“ * www.example.com/about*"，会发生什么情况，实际上他们将与＃about.html一起发送到首页。所以永远不会像这样“ * www.example.com/about#about*"