LARAVEL + Vue.js: использование лезвия для отображения целых компонентов страницы vue.js в MPA, не подходит для SEO

Question

LARAVEL + Vue.js: использование лезвия для отображения целых компонентов страницы vue.js в MPA, не подходит для SEO

2

Поэтому я подумываю о структуре веб-страницы моего ресторана, которая будет использовать laravel в качестве фонового (маршрутизация и отображение просмотров блейдов в браузере, простая система auth и сеансы) и vue.js для интерфейса (у меня есть один экземпляр vue, где я регистрирую компоненты, эти компоненты представляют собой один вид, целую страницу, на большинстве этих страниц есть два или три компонента, вложенные, например, слайдер изображения, на верхний якорь, я использую axios для извлечения конечных точек API без обновления страницы плюс много операций CRUD с панели администратора).

Так выглядит мое представление index.blade.php(www.domain.com/), у меня есть много просмотров, например posts.index.blade.php...

@extends('layouts.master')
@section('content')
    <page-index></page-index)
@endsection

Как вы можете видеть, я хочу рассматривать каждую страницу как vue.component со многими компонентами, вложенными внутри каждого компонента страницы).

У меня есть несколько вопросов о возможных осложнениях с использованием этой структуры.

При отображении представлений я всегда возвращаю объект json со всеми данными, которые я хочу отображать на лезвии, поскольку каждая страница в основном представляет собой компонент vue.js, загружаемый через javascript, как я могу перебирать блюда, события и сообщения, которые я вывозил из бэкенд. Это, я хочу использовать директиву v-for, но как мой компонент знает данные, переданные клику? Я не хочу использовать axios на смонтированном, чтобы заполнить мои взгляды..., что резко увеличит количество запросов, отправляемых на сервер.

Поскольку весь контент страницы отображается через javascript, это не повлияет отрицательно на SEO? Сканеры afaik search engones не будут получать контент, отображаемый javascript.

Является ли это хорошей практикой, это лучший способ справиться с laravel + vue.js non-SPA? Является ли это хорошей абстракцией интерфейсного и back-end?

Как я буду обрабатывать auth, это делать запросы axios для laravel конечных точек входа.

Peter Dickngale 14 сен. 2018, в 18:36

Источник

Теги:

javascript

laravel

vue.js

2 ответа

Ещё вопросы

Afraz Ahmad · Answer 1 · 2018-09-14T15-20-00.000Z

В вашей структуре приложения нужны файлы vue.js и идентификатор элемента, где он может отображать компоненты:

<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, где вы хотите использовать vue в приложении laravel

emotality · Answer 2 · 2018-09-14T14-11-00.000Z

Для передачи данных в компонент vue вы можете использовать реквизиты.

IndexController.php

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

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

index.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>

Здесь вы можете сделать свой цикл v-for с помощью parsedEvents.

Для SEO вы можете редактировать свои resources/views/layouts/master.blade.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