Маршрутизация на Vue с SSR и Laravel

Я изучаю Vue и застрял, пытаясь настроить его как полноценный интерфейс с Laravel, в моем сценарии я уже сделал личный блог для тестирования с использованием Laravel с движком Blade и некоторыми компонентами Vue и, кажется, работает нормально.

Я пытаюсь перейти на следующий уровень, удаляя Blade и позволяя Laravel в качестве бэкенда API и настраивая Vue как полноценный интерфейс с SSR, базовая настройка работает, я имею в виду, что я могу вызвать Vue, отрендерить его с помощью SSR с узлом или PHPv8, проблема, которую я Я использую систему маршрутов, думая, как блейд-способ, я не могу заархивировать тот же результат, на блейде я использую макет по умолчанию в качестве главного и импортирую его для каждого поста, страницы, блога и т. д.

Пример:

ресурсы / виды / макеты / master.blade

<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">

    <head>
        @include('partials._head')
    </head>

    @if(View::hasSection('body')) {{-- Load Custom Body --}}
        <body @section('body')>
    @else
        <body>
    @endif

        @yield('content')

        @include ('partials._javascripts')

        @section('scripts')
    </body>

</html>

Поэтому я называю динамический заголовок для каждой страницы / записи, динамический контент, базовые javascript-скрипты (bootstrap, vue, fontawesome и т. Д.) И пользовательские "скрипты" для каждой страницы / поста.

Используя библиотеку:

https://github.com/spatie/laravel-server-side-rendering

Я могу заставить SSR работать с узлом или PHPv8, но vue-route никогда не вызовет нужную страницу, мои настройки:

ресурсы / активы / JS / app.js

import Vue from 'vue';
import App from './layouts/App';
import axios from 'axios';
import store from './store';
import router from './router';
import navbar from './components/navbar';
import posts from './components/posts';
import sidebar from './components/sidebar';
import footer from './components/footer';
import BlogIndex from './views/blog/BlogIndex';



export default new Vue({
    store,
    router,
    navbar,
    posts,
    sidebar,
    footer,
    BlogIndex,
    render: h => h(App),
});

resources/assets/js/entry-client.js

import app from './app';

app.$mount('#app');

resources/assets/js/entry-server.js

import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';

app.$router.push(context.url);

renderVueComponentToString(app, (err, html) => {
    if (err) {
        throw new Error(err);
    }
    dispatch(html);
});

ресурсы / активы / JS / router.js

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home';
import BlogIndex from './views/blog/BlogIndex';

Vue.use(VueRouter);

const routes = [
    { path: '/', name: 'home', component: Home },
    { path: '/blog', name: 'blog', component: BlogIndex },
];

export default new VueRouter({
    mode: 'history',
    routes,
});

ресурсы / активы / JS / store.js

import Vue from 'vue';
import uniq from 'lodash/uniq';
import Vuex, { Store } from 'vuex';

Vue.use(Vuex);

export default new Store({
    state: {
    },

    getters: {
    },

    mutations: {
    },
});

ресурсы / активы / JS / просмотров / блог /BlogIndex.vue

<template>
    <div class="container">
        <navbar></navbar>
        <posts></posts>
        <sidebar></sidebar>
        <footer></footer>
    </div>
</template>



<script>

    export default {
        name: "BlogIndex",
        components: {
        }
    }
</script>

<style scoped>

</style>

приложение /Http/ Контроллеры /VueSSRController.php

<?php

namespace App\Http\Controllers;

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

class VueSSRController extends Controller
{

    public function __invoke()
    {
        return view('layouts.vue');
    }

}

ресурсы / виды / макеты / vue.blade.php

<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">

    <head>
        @section('extrajavascripts'){{ asset('js/scripts.min.js') }}@endsection
        @include('partials._head')
    </head>

    @if(View::hasSection('body')) {{-- Load Custom Body --}}
    <body @section('body')>
    @else
    <body>
    @endif

        {{-- Begin of Vue SSR --}}
        {!! ssr('resources/assets/js/server_bundle.min.js')
            // Share the packages with the server script through context
            //->context('packages', $packages)
            // If ssr fails, we need a container to render the app client-side
            ->fallback('<div id="app"></div>')
            ->render() !!}
        {{-- End of Vue SSR --}}

        @include ('partials._javascripts')

        @section('scripts')
        @show

    </body>

</html>

/resources/assets/js/layouts/App.vue

<template>
    <div id ="app">
        {{ message }}
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                message: 'SSR working.'
            }
        }
    }
</script>

<style scoped>

</style>

Таким образом, SSR работает нормально, проблема заключается в том, что resources/assets/js/router.js не загружает ресурсы /assets/js/views/blog/BlogIndex.vue, URL / блог работает, но отображаемым компонентом всегда является / ресурсы / активы / JS / макеты / App.vue.

Кто-то может указать, что мне не хватает настройки, пожалуйста?

Спасибо за совет!!!

Источник

1 ответ

Решение

Вы должны разместить <router-view></router-view> где вы хотите, чтобы маршрутизатор загрузился. Я думаю, что в вашем случае это ниже {{message}} в App.vue

Источник
Другие вопросы по тегам