所以我在考虑我的餐厅网页的结构，它将使用laravel作为后端（路由和显示刀片视图到浏览器，简单的认证系统和会话）和vue.js前端（我有一个单一的vue实例在我注册组件的地方，每个组件都是一个视图，一个完整的页面，这些页面中的大多数都有2到3个嵌套的组件，比如一个图像滑块，到顶部的锚，我使用axios来获取我的APIendpoint，而无需刷新页面加上许多CRUD操作从管理面板）。
这就是我的索引。刀身php视图外观（www.domain.com/），我有许多类似帖子的视图。指数刀身php。。。
@extends('layouts.master')
@section('content')
<page-index></page-index)
@endsection如您所见，我希望将每个页面视为一个vue。组件（每个页面组件中嵌套了许多组件）。
对于使用这种结构可能出现的复杂情况，我有几个问题。
显示视图时，我总是返回一个json对象，其中包含我希望在blade上呈现的所有数据，因为每个页面基本上都是一个vue。通过javascript加载的js组件如何循环浏览从后端获取的菜肴、事件和帖子。也就是说，我想使用v-for指令，但我的组件如何知道传递给刀片服务器的数据？我不想使用安装的axios来填充我的视图。。。这将大大增加发送到后端的请求数。
由于整个页面内容是通过javascript呈现的，这不会对SEO产生负面影响吗？？afaik搜索引擎爬虫不会获取javascript显示的内容。
这是一种良好的做法吗？这是处理laravel vue的最佳方法吗。js非水疗中心？这是前端和后端的良好抽象吗？
我将如何处理身份验证是通过对laravel登录endpoint执行axios请求。
要将数据传递到vue组件，可以使用道具。
索引控制器。php
...
$events = [
['id' => 111, 'foo' => 'bar'],
['id' => 123, 'foo' => 'bar']
];
return view('index')->with(compact('events')); // send events to blade
}
指数刀身php
@extends('layouts.master')
@section('content')
<page-index events="{{ json_encode($events) }}"></page-index> // send events to vue
@endsection
PageIndexComponent。vue
<script>
export default {
props: ['events'], // get events from here
mounted() {
parsedEvents = JSON.parse(this.events);
}
}
</script>
在这里，您可以使用parsedEvents执行v-for循环。
对于SEO，您可以编辑资源/视图/布局/主视图。刀身php：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="title" content="@hasSection('title')@yield('title')@else{{ config('app.name') }}@endif">
<meta name="description" content="@hasSection('description')@yield('description')@else{{ config('app.name') }}@endif">
<meta property="og:title" content="@hasSection('title')@yield('title')@else{{ config('app.name') }}@endif">
<meta property="og:description" content="@hasSection('description')@yield('description')@else{{ config('app.name') }}@endif">
<meta property="og:image" content="@hasSection('image')@yield('image')@else{{ asset('/images/avatar.jpg') }}@endif">
<meta property="og:type" content="@yield('type')">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:locale" content="en_US">
...
在每个视图中，您可以对标题、描述等进行硬编码，也可以从控制器发送：
@extends('layouts.master')
@section('title', 'Events') // or something like $page_title received from controller
@section('description', 'All Events') // or $page_desc sent from controller
@section('image', 'http://imgurl.com/123.png') // etc, etc
@section('type', 'article')
@section('content')
<page-index events="{{ json_encode($events) }}"></page-index)
@endsection
你的应用程序结构需要vue。js文件和可以呈现组件的元素id：
<html>
...
<head>...</head>
<body>
@extends('layouts.master')
@section('content')
<div id="app"> //vue will read this id and render components
<page-index></page-index>
</div>
@endsection
<script src="/js/app.js"></scrip>
// this is where webpack usually place compiled js files. It will run vue.on element having id=app.
</body>
记住！你必须包括vue.js文件，你想在laravel应用程序中使用vue
