laravel-admin 与 vue 结合使用实例代码详解

由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，并不是刷新整个 document，而是从服务器拿到部分 document，再通过类似 $(“#pjax-container”).html(newPart) 的方式更新的。

这就造成一个问题，每次 pjax 刷新，都会破坏 vue 的 dom 映射。

所以理论上有2种方法解决：

重新绑定一下 vue 的映射关系

在某些页面禁止 pjax

1 太难搞，而且没啥资料，放弃。2 的话比较可行。

部分禁止 pjax

打开 public/vendor/laravel-admin/laravel-admin/laravel-admin.js

添加代码：

// 不使用 pjax 刷新的页面$(document).on('pjax:beforeReplace', function (e, options) { // console.log(arguments) var freshPaths = [  ///admin.*//products/, ] for (let path of freshPaths) {  if (path.test) {   if (path.test(e.state.url)) {    location.reload()    return false   }  }  else if (options.url.search(path) !== -1) {   location.reload()   return false  } }})

使用自定义 view

很多时候我们并不需要大动干戈地建立一个全部的 view，只需要在内置 view 中稍作修改。

这时候，我们需要先自定义一个 Content 类：

use Encore/Admin/Layout/Content;class MyContent extends Content {  public function render() {    $items = [      'header'   => $this->header,      'description' => $this->description,      'breadcrumb' => $this->breadcrumb,      'content'   => $this->build(),    ];    return view('admin.content', $items)->render();  }}

然后引用它：

public function index(MyContent $content) {    return $content      ->header('product')      ->description($this->brand)      ->body($this->grid());  } 

    这样一来，每次进入到 index 页面，都会渲染 admin.content 这个 view 。

view 的内容直接 copy 自 vendor/encore/laravel-admin/resources/views/content.blade.php

在 view 里插入 vue 组件

添加2部分代码即可。

第一部分是初始化 vue app：

<script data-exec-on-popstate>  // boot up the demo  $(function () {   // vapp   window.vapp = new Vue({    el: '#app',    data () {     return {      status: {       showGalleryEditor: false,      },      store: {       images: [],       el: '',      },     }    },    components: {},    methods: {     startGalleryEditing (event) {      this.status.showGalleryEditor = true      this.store.pk = $(event.target).parent().find('ul').data('pk')      this.store.images = $(event.target).parent().find('img').toArray().map((e) => e.getAttribute('src'))      window.p = $(event.target).parent().find('ul')     },    },   })  })  </script>

 第2部分是插入组件：