[英]Routing on Vue with SSR and Laravel
我正在学习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。
有人会指出我缺少的设置吗?
谢谢建议!!!
您应该将<router-view></router-view>
放置在要加载路由器的位置。 我认为在您的情况下,它位于App.vue中的{{message}}
以下
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.