Laravel Vue SPA与MPA/SSR比较

Question

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

- Chris

---

我认为你在寻找的是客户端渲染和服务器端渲染之间的区别。关于这个主题有大量的信息，比如https://www.quora.com/What-are-the-tradeoffs-of-client-side-rendering-vs-server-side-rendering。 - Potray

这不仅仅是关于SSR的问题。我在思考使用Vue时SPA与MPA之间的区别。 - Chris

请查看https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58。 - Rwd

“推荐方式”并不明确，因为您询问的是两种不同但有效的技术。使用不同的视图和Laravel进行路由将更符合“Laravel”的方式。而SPA则更倾向于使用Vue及其生态系统。从表面上看，两者都没有更正确的答案。 - wheelmaker

Answer 1

对于单页应用程序（SPA），我建议采用标准设置，即在Web服务器上使用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;          
                });
    },

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

以下是Vue路由器的样子，其他URL路径将添加在“routes”下：

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
        },

    ],
});

- 65535