我考虑了下面的MPA-SPA混合版，我基本上将每个页面视为一个SPA，但仍然像习惯性的MPA一样重新加载页面以从一个页面传输到另一个页面（index.blade.php到posts.blade.php）。此方法使用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对象作为道具传递给vue组件，该道具包含vue渲染所需的所有数据。
当使用这种将每个页面视为组件的方法时，我可以使用vue。js single files将所有标记、逻辑（vue组件方法和样式）包含在一个文件中，这将使我更容易进行测试和调试。
我只有一个vue。我在其中注册所有页面组件的js根实例。
然而，由于我使用laravel控制器作为后端来检索所有数据以及刀片视图，我还必须创建vue.js组件和laravel刀片模板，这对我来说听起来像是双重工作。
你觉得这种模式怎么样？好吗？如果有任何改进的想法，我应该改用内联模板（这样我就不需要制作相应的刀片模板和vue.js页面组件了）。
使用水疗模式。
在spa中只有一次你的索引。刀身然后加载php文件。vue文件
这是你的索引。刀身php文件
@extends('layouts.master')
@section('content')
<body id="vue_root">
<vue-router></vue-router>
</body>
@endsection
这是你的旅馆。vue文件在哪里
list,add,edit,delete functionality
这是你room.vue档案
book room,check room available ,etc. functionality.
现在，若你们点击酒店链接，那个么只需加载酒店。vue文件及其功能，并向服务器（hotelcontroller）发送ajax请求，获取酒店列表以及json响应。。（不重新加载整个元素，仅重新加载元素）
如果单击“房间”链接，则仅加载房间。vue文件及其功能和加载室相关性。。（不重新加载整个元素，仅重新加载元素）
在vue中使用vue路由器，您可以这样做。。。。。。
有关更多详细信息，请参见此链接以及此链接
