Laravel-admin 引入自定义js与pjax冲突问题

Laravel-admin 引入自定义js与pjax冲突问题

1.方法一

第一步

加载 JS 文件

app/Admin/bootstrap.php

Admin::js('/js/admin-extended.js');

第二步

public/js/admin-extended.js

(function($){

    var AdminExtended = {
        init: function(){
            var self = this;

            // Pjax 所有事件请见：https://github.com/defunkt/jquery-pjax#usage

            $(document).on('pjax:start', function() {

            });

            //  after replacing content
            $(document).on('pjax:end', function() {

                // Pjax 模式里页面加载成功后的初始化
                self.siteBootUp();
            });

            // always fires after ajax, regardless of result
            $(document).on('pjax:complete', function() {

            });


            // 正常页面加载成功后的初始化
            self.siteBootUp();
        },

        siteBootUp: function(){
            var self = this;

            self.replaceEnglish();
        },

        replaceEnglish: function(){
            // 创建页面
            $('.file-drop-zone-title').text("拖动文件到此上传...");

            // 左边搜索框
            $('.sidebar-form .input-group input.form-control.autocomplete').attr("placeholder", '搜索...');
        },

    };
    window.AdminExtended = AdminExtended;
})(jQuery);

$(document).ready(function()
{
    AdminExtended.init();
});

注：方法1弊端：

这得把 .js 文件拆分出来，需要直接执行的语句必须塞进 pjax 定义的事件里面。可是，如果前端页面是用 vue 写的，pjax 反倒成了累赘。vue 组件里面调用 axios 实现无刷新，已经无需 pjax 过问了。要是能给 pjax 设置忽略规则就好了。例如像这样的链接 <a href='xxx' pjax-ignore>，当此链接被点击之后，pjax 检测到 a 标签包含了 pjax-ignore 属性，不会进行请求拦截。

可问题依然存在，就算可以设置 pjax 的忽略规则。如果点击的是普通链接，比如 <a href='yyy'> 这样的没有设置忽略规则的标签，仍然会导致 vue 组件挂载失败。

总而言之 pjax 和 vue 目前似乎不能很好的共存，还是要把 new Vue({ el: '#app' }); 这条语句从 .js 文件中分离出来，然后写进 pjax 事件里。

2.方法二

我图省事，直接使用一行代码
引入自定义js：

    //注意，不要添加结束标签 </script>
    Admin::script(" $(document.body).append(`<script src='$path/zzz.js'>`); "); 

引入自定义css：

    Admin::script(" $(document.body).append(`<link rel='stylesheet' href='$path/css/info.css'>`); ");

这可能是最便利的写法：1、无需拆分 .js 文件；2、无需过问 pjax 具体事件。依然可以实现 pjax 和 vue 的和谐共存，尽管性能上有所损失（pjax 管理了不该过问的细节问题）

按理说，没有结束的标签

安全起见，可能想要加个正斜杠，改成这样