在 Laravel 环境中设置 SSR | Vue 高级服务器端渲染：多页面应用程序

有关 Laravel 新 Vue 服务器端渲染功能的教程。本教程的重点是在 Laravel 环境中设置 SSR，因此我只有时间演示一个缺乏基本功能的“Hello World”应用程序。

现在我想在之前的教程的基础上演示如何使用 Vue Router 渲染具有多个页面的 Vue 应用程序，因为大多数 Laravel 项目都有多个页面。

安装

本教程将扩展上一篇文章中的应用程序，使用 Laravel & Vue.js 2.5 进行服务器端渲染。确保您了解其工作原理并设置适当的开发环境，例如安装 php-v8js 扩展。

如果您没有代码，请克隆并编辑它：

$ git clone https://github.com/anthonygore/vue-js-laravel-ssr

$ cd vue-js - laravel-ssr

$ cp .env.example .env

$composer install

$ npm i

然后安装 Vue 路由器： -$ npm ivue 路由器模块

首先,我们将创建一个文件来配置路由器，导出路由器实例以供应用程序使用。

我创建了多个示例路由，每个路由都指向从此方法创建的 pageComponent 组件。此工厂方法生成一个仅显示页面名称的简单组件。这就是证明 SSR 路线有效所需要的。

resources/asset/js/router.js

从'vue'导入Vue

从'vue-router'导入路由器

Vue.use（路由器）{

返回{

渲染: h =};

}

({新标准导出模式:'历史',

路线: [

{ 路径: '/', 组件: PageComponent('Home'), 名称: 'home' },

{ 路径: '/about' , 组件: PageComponent('关于'), 名称: 'about' },

{ path: '/contact', component: PageComponent('Contact'), name: 'contact' }

]

});

在当前主应用中在文件中，我们将导入路由器模块并将其添加到应用程序中，就像在 Vue 项目中一样。然后导出应用程序实例以在客户端和服务器条目文件中使用。

resources/assets/js/app.js

从'./components/App.vue'导入应用程序;

从'vue'导入Vue;

从'./router'导入路由器

新的Vue标准导出({

router,

render: h =?php

Route::get('/', 'AppController@get');

Route: :get ('/about', 'AppController @ get');

Route::get('/contact', 'AppController@get');

Regulator

现在我们需要在SSR 多页控制器。这是对基本应用程序逻辑的修改，因此请确保您已经知道它是如何工作的。

对于SSR多页面应用程序，我们需要告诉Vue服务器应用程序（在entry-server.js中定义）当前请求的URL是什么。这将确保当应用程序在沙箱中加载时，它将显示正确的页面组件。

为此，我们通过 render 方法的 get 方法传递 URL，即 $request-