如何使用ajax在動態內容加載后制作“漂亮”的URL

Question

我目前正在開發一個網站，該網站將使用由哈希更改觸發的 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 ，然后從關於頁面到另一個頁面，例如，聯系頁面。 我得到一個類似於www.example.com/about#contact的 URL。 當它看起來像這樣www.example.com#contact 時。

我的問題是處理這個問題的最佳方法是什么？ 我應該使用 jquery 將所有內容重定向到索引頁面，然后添加哈希以加載正確的內容嗎？ 或者有什么方法不能顯示 URL 中不必要的部分？

我希望我的問題很清楚，我是涉及 .htaccess 文件的服務器端內容的新手。 對於 ajax 的東西，我從 CSS 技巧中學習了本教程

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

Answer 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"

您可以在此處查看文檔。

請記住使用/覆蓋整個路徑。

要做我認為你想做的事情，你可以將 url 覆蓋為/並設置哈希值。

Answer 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*”