Javascript 拉威尔+；Vue.js：使用刀片以MPA格式显示整个页面Vue.js组件，不利于搜索引擎优化_Javascript_Laravel_Vue.js

Javascript 拉威尔+；Vue.js：使用刀片以MPA格式显示整个页面Vue.js组件，不利于搜索引擎优化

javascript laravel vue.js

Javascript 拉威尔+；Vue.js：使用刀片以MPA格式显示整个页面Vue.js组件，不利于搜索引擎优化,javascript,laravel,vue.js,Javascript,Laravel,Vue.js,因此，我正在考虑我的餐厅网页的结构，该网页将使用laravel作为后端（将刀片视图路由和显示到浏览器、easy auth系统和会话），并使用vue.js作为前端（我有一个vue实例，我在其中注册组件，这些组件每个都是一个视图，一个完整的页面，这些页面中的大多数都嵌套了2或3个组件，如图像滑块，以顶部锚定，我使用axios获取API端点，而无需刷新页面以及管理面板中的许多CRUD操作）这就是我的index.blade.php视图（www.domain.com/）的外观，我有许多类似posts.i

因此，我正在考虑我的餐厅网页的结构，该网页将使用laravel作为后端（将刀片视图路由和显示到浏览器、easy auth系统和会话），并使用vue.js作为前端（我有一个vue实例，我在其中注册组件，这些组件每个都是一个视图，一个完整的页面，这些页面中的大多数都嵌套了2或3个组件，如图像滑块，以顶部锚定，我使用axios获取API端点，而无需刷新页面以及管理面板中的许多CRUD操作）

这就是我的index.blade.php视图（www.domain.com/）的外观，我有许多类似posts.index.blade.php的视图

@extends（'layouts.master'））
@节（“内容”）
您的应用程序结构需要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>


...
...
@扩展（'layouts.master'）
@节（“内容”）
//vue将读取此id并渲染组件
@端部
//这是webpack通常放置编译的js文件的地方。它将在id=app的元素上运行vue.on。

记住！要在laravel应用程序中使用vue，必须在其中包含vue.js文件
要将数据传递到vue组件，可以使用
IndexController.php
    ...
    $events = [
        ['id' => 111, 'foo' => 'bar'],
        ['id' => 123, 'foo' => 'bar']
    ];

    return view('index')->with(compact('events')); // send events to blade
}

@extends('layouts.master')
@section('content')
    <page-index events="{{ json_encode($events) }}"></page-index> // send events to vue
@endsection

index.blade.php
    ...
    $events = [
        ['id' => 111, 'foo' => 'bar'],
        ['id' => 123, 'foo' => 'bar']
    ];

    return view('index')->with(compact('events')); // send events to blade
}

@extends('layouts.master')
@section('content')
    <page-index events="{{ json_encode($events) }}"></page-index> // send events to vue
@endsection

在每个视图中，您可以硬编码标题、描述等，也可以从控制器发送：
@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

@extends（'layouts.master'））
@节（'title'，'Events'）//或从控制器接收的类似$page\u title的内容
@节（'description'，'All Events'）//或从控制器发送的$page\u desc
@节（'图像'，'http://imgurl.com/123.png）/等等
@节（“类型”、“文章”）
@节（“内容”）
你找到解决这个问题的方法了吗？我也不得不面对同样的问题。很好的解释！但是用JSON从db解析到Vue组件的数据，对SEO友好吗？谷歌会抓取这些信息吗？有趣的问题！但我不知道机器人看到了什么。如果我不得不猜测的话，我会说，可能不会。当我开始使用vuejs作为我的应用程序时联系方式我不再让这些垃圾机器人胡言乱语。所以我想说，机器人可能会读
，而不是实际的html。我可能错了，吸拇指。