Laravel Vue SPA与MPA/SSR

问题描述

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

Many laravel/vue tutorials use ajax calls to get the data. It seems that the SPA is completely isolated from Laravel. I.e. Laravel is just a data API and the vue app could also simply be hosted on a third party external server (e.g. AWS S3). Is this the recommended way, or should I rather use Laravel for Routing and have separate views that implement individual components and already included data instead of using a SPA?

推荐答案

对于SPA，我建议仅使用标准设置，即Web服务器上的Laravel和浏览器中的Vue.为此，请安装Laravel和Vue.从浏览器到服务器的AJAX通信是通过Vue随附的Axios库完成的.这是如何安装Laravel和Vue路由器:

For an SPA, I would recommend just going with the standard setup, which is Laravel on the webserver and Vue in the browser. To do this, install Laravel and Vue. AJAX communications from the browser to the server are accomplished with the Axios library which comes with Vue. Here is how to install Laravel and Vue router:

composer require laravel/ui

php artisan ui vue

npm install && npm run dev

npm install vue-router

npm run watch

在Vue组件中，使用Axios与服务器进行通信如下所示.另外，在下面，在Laravel>路线> web.php中定义了端点:

From within a Vue component, using Axios to communicate with the server looks like the following. Also, in the following, the endpoint is defined in the 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中.

A Vue router is declared in the main js file. For instance, in app.js.

这是Vue路由器的外观，另外的url路径将添加到"routes"下:

Here is what a Vue router looks like, and additional url paths would be added under "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
        },

    ],
});

这篇关于Laravel Vue SPA与MPA/SSR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！