javascript - 如何在 history.js 中使用正斜杠而不是哈希 (#)？

Question

我正在使用 history.js plugin并想知道如何实现 / 类型的 URL。现在我的代码是:

//Check if url hash value exists (for bookmark)
$.history.init(pageload);   

//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');

//Seearch for link with REL set to ajax
$('a[rel=ajax]').click(function () {

    //grab the full url
    var hash = this.href;

    //remove the # value
    hash = hash.replace(/^.*#/, '');

    //for back button
    $.history.load(hash);   

    //clear the selected class and add the class class to the selected link
    $('a[rel=ajax]').removeClass('selected');
    $(this).addClass('selected');

    //hide the content and show the progress bar
    $('#content').hide();
    $('#loading').show();

    //run the ajax
    getPage();

    //cancel the anchor tag behaviour
    return false;
}); 



function pageload(hash) {
    //if hash value exists, run the ajax
    if (hash) getPage();    
}



function getPage() {

//generate the parameter for the php script
var data = 'page=' + document.location.hash.replace(/^.*#/, '');
$.ajax({
    url: "route.php",  
    type: "GET",        
    data: data,     
    cache: false,
    success: function (html) {  

        //hide the progress bar
        $('#loading').hide();   

        //add the content retrieved from ajax and put it in the #content div
        $('#content').html(html);

        //display the body with fadeIn transition
        $('#content').fadeIn('slow');       
    }       
});
}

URL 始终是 http://localhost/test/index.php#page1 但我想知道如何制作 http://localhost/test/page1.

我也不希望它显示 index.php 部分，我需要它就像上面的 URL。

Answer 1

这只能使用 HTML5 和 history.pushState() 来完成.

该 API 允许您在不触发页面加载的情况下更改显示的 URL(只要它在同一域中)。然后您可以使用 AJAX 来更改显示的内容。

要查看实际效果，请浏览 github.com 上的任何源代码树 - 他们使用该技术在您浏览文件时“滑入”源代码。