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

2020-06-12 21:18:19易采站长站整理

由于

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 EncoreAdminLayoutContent;
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: [],