Расширенный рендеринг на стороне сервера с Laravel и Vue: многостраничное приложение

Теперь нам нужно настроить многостраничный SSR в контроллере. Это модификация логики в базовом приложении, поэтому убедитесь, что вы знакомы с тем, как это работает.

Чтобы создать многостраничное приложение SSR, нам нужно сообщить приложению сервера Vue (как определено в entry-server.js ), какой текущий URL-адрес запрашивается. Это гарантирует, что когда приложение загружается в песочницу, оно отображает правильный компонент страницы.

Для этого мы передаем URL, то есть $request->path(), через renderметод из getметода. Затем мы сохраняем URL-адрес в глобальной переменной JavaScript, urlкоторая будет доступна из серверного приложения Vue при запуске в песочнице.

приложение / HTTP / Контроллеры / AppController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
use Illuminate\Routing\Route;

class AppController extends Controller
{
  private function render($path) {
    $renderer_source = File::get(base_path('node_modules/vue-server-renderer/basic.js'));
    $app_source = File::get(public_path('js/entry-server.js'));

    $v8 = new \V8Js();

    ob_start();

    $js = 
<<<EOT
var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } }; 
this.global = { process: process }; 
var url = "$path";
EOT;

    $v8->executeString($js);
    $v8->executeString($renderer_source);
    $v8->executeString($app_source);

    return ob_get_clean();
  }

  public function get(Request $request) {
    $ssr = $this->render($request->path());
    return view('app', ['ssr' => $ssr]);
  }
}

import app from './app'
import router from './router';

new Promise((resolve, reject) => {
  router.push(url);
  router.onReady(() => {
    const matchedComponents = router.getMatchedComponents();
    if (!matchedComponents.length) {
      return reject({ code: 404 });
    }
    resolve(app);
  }, reject);
})
  .then(app => {
    renderVueComponentToString(app, (err, res) => {
      print(res);
    });
  })
  .catch((err) => {
    print(err);
  });

<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <router-view></router-view>
    <router-link :to="{ name: 'about' }">About</router-link>
    <router-link :to="{ name: 'contact' }">Contact</router-link>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Welcome To My Site'
      }
    }
  }
</script>