Laravel + Vue.js MPA/SPA 混合结构的建议和思考答案

【问题标题】：Laravel + Vue.js MPA/SPA hybrid structure suggestions and thoughtsLaravel + Vue.js MPA/SPA 混合结构的建议和思考
【发布时间】：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 页面组件。

【问题讨论】：

标签： javascript php laravel 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

【讨论】：