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

【问题标题】：How to make "Pretty" URL after dynamic content load using ajax如何在使用 ajax 动态内容加载后制作“漂亮”的 URL
【发布时间】：2020-08-28 16:30:24
【问题描述】：

我目前正在开发一个网站，该网站将使用由哈希更改触发的 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”页面，然后从那里导航到 about 页面，则 URL 看起来不错。 “www.example.com#about”，因为服务器不会在 URL 中显示“索引”。

但是，如果我像 www.example.com/about 这样直接导航到关于页面，然后从关于页面转到另一个页面，例如联系页面。我得到一个类似于 www.example.com/about#contact 的 URL。什么时候应该是这样的www.example.com#contact。

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

我希望我的问题很清楚，我对涉及 .htaccess 文件的服务器端内容不熟悉。对于我在 CSS 技巧中遵循本教程的 ajax 内容

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

【问题讨论】：

标签： html jquery .htaccess url

【解决方案1】：

你可以使用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 覆盖为 / 并设置哈希。

【讨论】：

这样做的问题是它会在历史记录中添加不必要的更改，因此如果用户决定返回，他们将不得不按两次返回按钮。

【解决方案2】：

这可能不是最好的方法，但我设法将任何页面重定向到主页，然后将 / 替换为哈希值，这样网站最终不会出现“混乱”的 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*"

【讨论】：