Javascript 如何使Laravel/Vue实现显示单个条目

我正在尝试将Laravel与Vue相结合，并进一步将Nuxt与之结合，希望我能够将时髦的页面转换（如网站上显示的页面转换）整合到我的网站中

我一直在阅读一篇关于将Vue与Laravel一起使用的教程，我很高兴地发现Laravel附带了一个Vue实现，所以我认为会有很多关于如何将两者结合使用的信息，但似乎没有

我完成了教程并制作了所描述的留言簿。我现在正试图以此为基础

具体来说，我试图为每个留言簿条目创建单独的页面

我确实有相当多的使用Laravel的经验，但仅限于我在Vue上面所描述的

因此，为了创建各个页面，我在

routes/web.php

文件中创建了一个新路由

Route:：get（'signature/{id}'，'SignaturesController@show'）->姓名（'签名'）

然后，我在
app/Http/Controllers/SignaturesController.php
中创建了一个新的代码块来处理这个请求

public function show（）
{
返回视图（'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`

最后，我在
resources/assets/js/app.js
中注册了该组件，并重新运行
npm run dev

这已经工作到一个扩展，我可以在预期的url查看文件<代码>http://transitions.localhost/signature/1

我的问题是，如何将ID为1的签名相关数据输入页面？我甚至不能呼出

{{id}

或

{{signature}

---

如果您发现任何其他对本主题有帮助的资源，也将不胜感激。感谢您花时间阅读所有这些内容，有人知道我将从这里走到哪里吗？

您需要将数据传递到您的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>

此签名的ID为：{{signature.ID}
导出默认值{
道具：[“签名”]
}

Brilliant，谢谢你，我还需要在其他地方做一些更改，但这让我走上了正确的道路。再次感谢您快速而有益的回复。

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

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