Laravel 5.1 - Ajax Navigation not working with Javascript history API

I'm currently working on an app that needs to load my views by ajax from navigation menu.

My menu:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo menu-link" data-route="index" href="{{ url('/') }}"><img src="{{ asset('img/logo.png') }}" alt="my-app-logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a class="menu-link" href="" data-route="studio">Studio</a></li>
        <li><a class="menu-link" href="" data-route="customers">Customers</a></li>
        <li><a class="menu-link" href="" data-route="bio">Bio</a></li>
        <li><a class="menu-link" href="" data-route="contacts">Contacts</a></li>
    </ul>
</div>

My routes:

Route::get('/', 'PagesController@index');
Route::get('/{page}', 'PagesController@loadPage');

My controller:

class PagesController extends Controller {

    // Index
    public function index(){
        return view('pages.index');
    }

    // load page
    public function loadPage($page){
        return view('ajax.'.$page)->render();
    }

}

A view sample (here i pass pure html without extending the blade template):

<div class="content">
    <div class="studio">
        <div class="custom-area">
            <div class="page-title-box">
                <h3 class="page-number">N. 67</h3>
                <h1 class="page-title">Area Test</h1>
            </div>
        </div>
    </div>
</div>

My Javascript:

// in my document.ready    

// get url page name and load my view at refresh page
var urlFull = window.location.href,
    pageName = urlFull.split('/').pop();
loadContentPage(pageName);

// get view from browser's navigation
window.onpopstate = function(event) {
    loadContentPage(pageName);
}

// Laravel setup for ajax calls
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content-wrapper')
    }
});

var route;
$('.menu-link').on('click', function(){

    // active link
    $('.menu-link').removeClass('active');
    $(this).addClass('active');

    // load content
    route = $(this).data('route');

    // If i pass an empty string to simply call my index, in console i have an error(*)
    if(route == 'index'){ route = ''; }
    loadContentPage(route);

    // history
    History.pushState(route, null, route);

    return false;
});

// end document.ready

function loadContentPage(page){
    $('#content-wrapper').children().fadeOut(150, function(){
        $('#content-wrapper').load("{{ url('/') }}/" + page, function(data){
            $(this).html(data);
        });
    });
}

(*) The first problem is in the console i get this:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://ift.tt/ZyN3LX.

Now my app is completely not working, i'm wondering:

1. How to solve this

2. How to pass a second parameter in my route if i need a page detail like this:

   (Route::get('/{page}/{detail}', 'PagesController@loadPage'));

via Chebli Mohamed