Маршрутизация на Vue с SSR и Laravel - PullRequest
Новая
       15

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

0 голосов
/ 29 сентября 2018

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

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

Пример:

resources / views / layouts / 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 никогда не вызывать нужную страницу, мои настройки:

resources / assets / 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);
});

resources / assets / 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,
});

resources / assets / 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: {
    },
});

resources /assets / js / views / blog / 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>

app / Http / Controllers / 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');
    }

}

resources / views / layouts / 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 / блог работает, но отображаемый компонент всегда является /resources / assets / js / layouts / App.vue.

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

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

1 Ответ

0 голосов
/ 29 сентября 2018

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

...