使用SSR和Laravel在Vue上進行路由

Question

我正在學習Vue，並嘗試將其設置為與Laravel一起使用的完整前端，在我的場景中，我已經制作了一個個人博客，用於使用帶有Blade引擎和Vue某些組件的Laravel進行測試，並且看起來工作正常。

我正在嘗試進入下一個級別，刪除Blade並讓Laravel作為API后端，並使用SSR將Vue設置為完整前端，基本的設置工作正常，我的意思是我可以調用Vue，使用帶有節點或PHPv8的SSR來渲染它，這是我遇到的問題我在路由系統上，以刀片方式無法保存相同的結果，在刀片上，我使用默認布局作為母版，並將其導入每個帖子，頁面，博客等...

例：

資源/視圖/布局/ 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（引導程序，vue，fontawesome等）和每頁/帖子為自定義“腳本”。

使用庫：

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

我可以使SSR與node或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可以正常工作，問題是資源/資產/js/router.js沒有加載資源/資產/js/views/blog/BlogIndex.vue,URL/博客有效，但是呈現的組件始終是/資源/資產/ JS /布局/ App.vue。

有人會指出我缺少的設置嗎？

謝謝建議！！！

Answer 1

您應該將<router-view></router-view>放置在要加載路由器的位置。 我認為在您的情況下，它位於App.vue中的{{message}}以下

使用SSR和Laravel在Vue上進行路由

問題描述

1 個解決方案

解決方案1
1 已采納 2018-09-29 11:11:24

使用SSR和Laravel在Vue上進行路由

問題描述

1 個解決方案

解決方案1 1 已采納 2018-09-29 11:11:24

解決方案1
1 已采納 2018-09-29 11:11:24