Маршрутизация на Vue с SSR и Laravel
Я изучаю Vue и застрял, пытаясь настроить его как полный интерфейс с Laravel, по моему сценарию я уже сделал личный блог для тестирования с использованием Laravel с движком Blade и некоторыми компонентами Vue, и, похоже, он работает нормально.
Я пытаюсь перейти на следующий уровень, удаляя Blade и разрешая Laravel в качестве бэкэнда API и настраивая Vue как полный интерфейс с SSR, базовая настройка работает, я имею в виду, что я могу вызвать Vue, визуализировать его с помощью SSR с node или 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>
Поэтому я называю динамический заголовок для каждой страницы / сообщения, динамический контент, базовые javascripts (bootstrap, vue, fontawesome и т. д.) И пользовательские «скрипты» для каждой страницы / сообщения.
Использование библиотеки:
https://github.com/spatie/laravel-server-side-rendering
Я могу заставить SSR работать с node или 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 работает нормально, проблема в том, что ресурсы / assets / js / router.js не загружают ресурсы / assets / js / views / blog / BlogIndex.vue, url / blog работает, но визуализируемый компонент всегда / ресурсы / активы / js / макеты / App.vue.
Кто-нибудь может указать, что мне не хватает настройки, пожалуйста?
Спасибо за совет !!!
Ответы 1
Вы должны разместить <router-view></router-view> там, где вы хотите, чтобы маршрутизатор загрузился. Я думаю, что в вашем случае это ниже {{message}} в App.vue
Большое тебе спасибо!!!! Вы правы, что начали рендерить правильные представления. Это сообщение предназначено только для отладки и поиска тега data-server-rendered = "true" в источнике.
Я также настроил это в своей локальной системе. Мне любопытно узнать, что вы написали внутри web.php, т.е. маршруты.