在 Laravel 6.0 中使用 pjax 进行页面加速，并实现页面顶部进度条

Hemer 的个人博客 / 0 / 1 / 创建于 5年前 / 更新于 5年前

自己学习Laravel也有一段时间了，最近在写项目时想用页面顶部进度条来使自己的页面效果好一点。于是便查看了站长5年前的一份文章，但是我自己使用起来总是会发生错误（可能是我自己弄错了），于是便自己进行摸索。
此篇文章是我发表第的第一篇，编辑器不太会使用，请见谅.

在你阅读以下文章时，强烈建议您先阅读站长发的文章.阅读站长文章

一.安装 `rcrowe/Turbo`

执行 composer 命令

    composer require spatie/laravel-pjax

二.注册中间件

在 app\Http\Kernel.php $middlewareGroups 数组中的 web 中添加

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

三.使用中间件

如果对使用中间件不熟悉的建议先去看一下


Route::middleware(['web'])->prefix('index')->group(function () {
        Route::get('index', function () {
            return view("index");
        });
        Route::get('login', function () {
            return view("login");
        });
    });    
        #使用中间件有很多种方法,我就不一一举例.

四.页面中引入css和js

下载 jquery.pjax.js 以及 nprogress 之后在页面引入css和js 并添加以下js代码

注意:此时页面应该引入了三个js文件分别是 Jquery jquery.pjax.js nprogress.js

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