Как заставить реализацию Laravel / Vue показывать индивидуальную запись

Question

Я пытаюсь интегрировать Laravel с Vue, и далее вниз по строке Nuxt, в надежде, что смогу интегрировать эффектные переходы страниц, подобные показанным на http://page -transitions.com , в мой веб-сайтов.

Я читал учебник по использованию Vue с Laravel; https://scotch.io/tutorials/build-a-guestbook-with-laravel-and-vuejs, и я был рад обнаружить, что Laravel поставляется с реализацией Vue, поэтому я подумал, что будет довольно много информации о том, как использовать их в комбинации, но, похоже, их нет.

Я закончил урок и сделал гостевую книгу, как было описано. Я сейчас пытаюсь развить это.

В частности, я пытаюсь создать отдельные страницы для каждой записи в гостевой книге.

У меня довольно много опыта использования Laravel, но только то, что я описал выше с Vue.

Итак, для создания отдельных страниц я создал новый маршрут в файле routes/web.php;

Route::get('signature/{id}','SignaturesController@show')->name('signature');

Затем я создал новый блок кода в app/Http/Controllers/SignaturesController.php для обработки этого запроса;

public function show() { return view('signatures.signature'); }

Я создал указанный вид в resources/views/signatures/signature.php;

@extends('master')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <signature></signature>
            </div>
        </div>
    </div>
@endsection`

И я создал файл vue, который должен интегрироваться с этим представлением в resources/assets/js/components/Signature.vue;

<template>
    <h1>Signature</h1>
</template>

<script>
    export default {

    }
</script>

Наконец, я зарегистрировал компонент в resources/assets/js/app.js и перезапустил npm run dev.

Это сработало для экстента, я могу просмотреть файл по ожидаемому URL; http://transitions.localhost/signature/1.

У меня вопрос, как мне получить на странице данные, связанные с подписью с идентификатором 1? Я даже не могу повторить {{ id }} или {{ signature }}.

Будем весьма благодарны за любые другие полезные вам материалы по этому вопросу. Спасибо, что нашли время, чтобы прочитать все это, кто-нибудь знает, куда я иду отсюда?

Answer 1

Вам нужно будет передать данные в компонент vue

Может быть, как-то так?

На ваш взгляд:

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <signature :signature="{{ $signature }}"></signature>
            </div>
        </div>
    </div>
@endsection

В вашем компоненте vue:

<template>
    <h1>This signature has the ID of: {{ signature.id }}</h1>
</template>

<script>
    export default {
        props: ['signature']
    }
</script>