Laravel + Vue.js MPA/SPA 混合结构的建议和思考
Posted
技术标签:
【中文标题】Laravel + Vue.js MPA/SPA 混合结构的建议和思考【英文标题】：Laravel + Vue.js MPA/SPA hybrid structure suggestions and thoughts 【发布时间】：2019-02-19 14:47:27 【问题描述】：我想到了以下 MPA - SPA 混合，我基本上将每个页面视为一个 SPA，但仍然像习惯性一样重新加载页面以从一个页面过渡到另一个页面（index.blade.php 到 posts.blade.php） MPA。此方法使用 laravel 路由、会话和身份验证的强大功能来渲染包含单个 vue.js 组件的刀片模板。
想象一下你在主页，你会看到这样的东西：
@extends('layouts.master')
@section('content')
<body id="vue_root">
<page-index data= json encoded data from backend ></page-index>
</body>
@endsection如你所见，我将一个 json 对象作为一个 prop 传递给 vue 组件，这个 prop 包含 vue 渲染所需的所有数据。
当使用这种将每个页面视为一个组件的方法时，我可以使用 vue.js 单个文件将所有标记、逻辑（vue 组件方法和样式）包含在一个文件中，这将使我更容易测试和调试。
我有一个 vue.js 根实例，我在其中注册了所有页面组件。
但是，由于我使用 laravel 控制器作为后端来检索所有数据以及刀片视图，因此我还必须创建 vue.js 组件和 laravel 刀片模板，这对我来说听起来像是双重工作。
您如何看待这种模式？好吗？任何改进这一点的想法，我是否应该使用 inline-templates 代替（这样我就不需要制作相应的刀片模板和 vue.js 页面组件。
【问题讨论】：
【参考方案1】：使用水疗模式。
在 spa 中只加载一次 index.blade.php 文件然后加载 .vue 文件
那么例子：这是你的 index.blade.php 文件
@extends('layouts.master')
@section('content')
<body id="vue_root">
<vue-router></vue-router>
</body>
@endsection
这是您的 hotel.vue 文件，其中
list,add,edit,delete functionality
这是你的 room.vue 文件
book room,check room available ,etc. functionality.
现在，如果您单击酒店链接，则只需加载带有其功能的 hotel.vue 文件 并将ajax请求发送到服务器（hotelcontroller）并获取带有json响应的酒店列表..（不重新加载整个只是重新加载元素）
如果你点击房间链接，那么只加载 room.vue 文件和他的 功能和加载室依赖性..（不重新加载整个只是重新加载 元素）
在vue中使用vue-router你可以这样做......
有关更多详细信息，请参阅此link 和此link
【讨论】：
以上是关于Laravel + Vue.js MPA/SPA 混合结构的建议和思考的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 和 Vue.js 看不到 css 和 js 文件