排除在 Laravel-admin 使用 Vue 時，Pjax 干擾的問題

ycs77發表於2019-08-23
LaravelVue

雖然用 Laravel-admin 開發 CRUD 很快速，但如果要需要使用 Vue 開發前端元件時，Pjax 就會干擾，讓 Vue 出現了各式各樣奇怪的問題。以下為解決方法：

本文介紹的方法是以 laravel-admin 與 vue 結合使用 為基礎來修改的。

排除不使用 Pjax 重新整理頁面的後臺路徑

首先先新增 app/Admin/helpers.php：

<?php

if (!function_exists('ignore_pjax_paths')) {
    /**
     * 排除不使用 Pjax 重新整理頁面的後臺路徑
     *
     * @param  array  $freshPaths
     * @return void
     */
    function ignore_pjax_paths($freshPaths) {
        $prefix = config('admin.route.prefix');

        $freshPathsJson = collect($freshPaths)->map(function ($path) use ($prefix) {
            return "/\/$prefix\/$path/";
        })->implode(',');
        $freshPathsJson = "[$freshPathsJson]";

        Admin::script(<<<EOT
$(document).on('pjax:start', function (e, contents, options) {
    const freshPaths = $freshPathsJson;
    for (let path of freshPaths) {
        if (options.url.search(path) !== -1) {
            location.reload();
            return false;
        }
    }
});
EOT
        );
    }
}

有了排除的方法後，就可以在 app/Admin/bootstrap.php 中呼叫，但引數必須符合正規表示式的格式，例如要排除的網址是http://example.test/admin/ignore/...，必需輸入 ignore\/aaaa\/.*：

...

include_once 'helpers.php';

ignore_pjax_paths([
    'ignore\/aaaa\/.*',
]);

此時訪問以上頁面時，將會重新從伺服器載入頁面，Vue 也會正常運作了。

禁止表單使用 Pjax 送出

這個比較簡單，自訂一個 View 之後，在 <form> 標籤中不要加 pjax-container 屬性，就會以正常的 POST 方法送出。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章