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. 如果我在我的路由中传递第二个参数 需要这样的页面详细信息：

   (Route::get('/{page}/{detail}', '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);
        });
    });
}