Laravel Vue SPA vs MPA/SSR

Question

许多laravel/vue教程使用ajax调用来获取数据。看起来SPA和Laravel是完全隔离的。也就是说，Laravel只是一个数据应用程序接口，vue应用程序也可以简单地托管在第三方外部服务器(例如亚马逊S3)上。这是推荐的方式吗?还是应该使用Laravel进行路由，并使用单独的视图来实现各个组件和已包含的数据，而不是使用SPA？

Answer 1

对于SPA，我建议只使用标准设置，即and服务器上的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
        },

    ],
});