Laravel Vue SPA 与 MPA/SSR答案

【问题标题】：Laravel Vue SPA vs MPA/SSRLaravel Vue SPA 与 MPA/SSR
【发布时间】：2018-01-14 09:41:41
【问题描述】：

许多 laravel/vue 教程使用 ajax 调用来获取数据。 SPA 似乎与 Laravel 完全隔离。 IE。 Laravel 只是一个数据 API，vue 应用程序也可以简单地托管在第三方外部服务器（例如 AWS S3）上。这是推荐的方式，还是我应该使用 Laravel 进行路由，并使用单独的视图来实现各个组件并已经包含数据，而不是使用 SPA？

【问题讨论】：

我想你要找的是客户端渲染和服务器端渲染的区别。关于该主题的信息过多，例如quora.com/…
这不仅仅是关于 SSR。我想知道 SPA 与 MPA 与 vue
看看medium.com/@NeotericEU/…
不清楚您所说的“推荐方式”是什么意思，因为您询问的是两种不同但有效的技术。拥有不同的视图并使用 laravel 进行路由将是更“laravel”的方式。 SPA 会更倾向于 Vue 及其生态系统。从表面上看，两者都不比另一个更正确。

标签： laravel vue.js

【解决方案1】：

对于 SPA，我建议只使用标准设置，即网络服务器上的 Laravel 和浏览器中的 Vue。为此，请安装 Laravel 和 Vue。从浏览器到服务器的 AJAX 通信是通过 Vue 附带的 Axios 库完成的。以下是如何安装 Laravel 和 Vue 路由器：

composer require laravel/ui

php artisan ui vue

npm install && npm run dev

npm install vue-router

npm run watch

在 Vue 组件中，使用 Axios 与服务器通信如下所示。此外，在下面，端点是在 Laravel > Routes > web.php 中定义的：

 methods: {

    fetchMessages() {

        let endpoint = `/channels/${this.activeChannel}/messages`;

        axios.get(endpoint).then(resp => {
                    this.messages = resp.data.messages;          
                });
    },

在主 js 文件中声明了一个 Vue 路由器。例如，在 app.js 中。

这是一个 Vue 路由器的样子，额外的 url 路径将添加到“路由”下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
        base: '/',
        mode: 'history',
        history: true,

        routes: [
        {
            path: '/',
            name: 'home',
            component: PostComponent
        },

    ],
});

【讨论】：