laravel 5.5中使用pjax

laravel使用pjax

请务必严格按照文档操作 pjax有很好的体验和优化资源的

1.后端安装spatie/laravel-pjax包

composer require spatie/laravel-pjax

2.设置中间件

在 app/Http/Kernel.php 的 protected $middlewareGroups 的 web 中加入以下內容

\Spatie\Pjax\Middleware\FilterIfPjax::class,

2.前端安装jquery-pjax

$ npm install jquery-pjax

3.引入jquery-pjax

在resources/assets/js/bootstrap.js

# 在boostrap下面引入jquery-pjax
require('jquery-pjax');

4.安装nprogress加载样式[js]

npm install --save nprogress

5.引入nprogress

在resources/assets/js/bootstrap.js

window.NProgress = require('nprogress')

6.打包nprogress.css

将nprogress.css放置在resources/assets/css目录下 resources/assets/sass/app.scss中计入一下代码

// 引入nprogress的css样式
@import "./../css/nprogress";

7.打包前端文件

$ npm run dev

8.增加监听的js

写在一个boot.js的文件,在app.blade.php中的app.js下引入即可

// 用于pjax的样式加载
$(document).ready(function()
{
    $(document).pjax('a', 'body');

    $(document).on('pjax:start', function() {
        NProgress.start();
    });
    $(document).on('pjax:end', function() {
        NProgress.done();
//                self.siteBootUp();
    });
});

9.最后当你点击a链接的时候回出现如下图效果 pjax效果图