Laravel 5.1 - Ajax導航不能使用Javascript歷史API

Question

我目前正在從一個應用程序，需要通過ajax從導航菜單中加載我的意見。

我的菜單：

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

我的路線：

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

我的控制器：

class PagesController extends Controller { 

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

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

} 

視圖樣品（在這裏，我通過而不延伸的葉片模板純HTML）：

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

我的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(); 

// currently only my index has blade functions, other pages content is pure html 
if(pageName != ''){ 
    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); 
     }); 
    }); 
} 

（*）的第一個問題是在控制檯中我得到這個：

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

如果我刷新頁面時，我有例如http://localhost:8888/app-test/public/studio我只得到HTML，我想知道：

1. 如何解決這個

2. 如何通過第二個參數在我的路線，如果我 需要一個頁面的細節是這樣的：

   （路線::得到（ '/ {PAGE}/{詳細}'， 'PagesController @ loadPage'））;

編輯：添加函數中的變量，現在歷史可以工作：

window.onpopstate = function(event) { 
    var urlFull = window.location.href, 
     pageName = urlFull.split('/').pop(); 
    loadContentPage(pageName); 
} 

但我仍然停留在我刷新從我的指數不同的URL頁面，my-app/studio僅返回我的視圖的內容，純html。 我認爲這可能是一個途徑的問題，但我仍然沒有關於它的想法

Answer 1

嘗試：

function loadContentPage(page){ 
var url = "{{ url('/') }}/"; 
    $('#content-wrapper').children().fadeOut(150, function(){ 
    if(page != 'index') { 
     url += page; 
     } //end if you have other params update the url based on your routes 
     $('#content-wrapper').load(url, function(data){ 
      $(this).html(data); 
     }); 
    }); 
}