如何从服务器端laravel将数据传递到路由器视图

Question

我希望能够将道具从服务器端传递到RouterView插槽，即GroupView.vue，这是完整的故事：

GroupsController @ index

public function index()
    {
        $groups = Group::paginate(5) ; 
        return view("groups",compact("groups"));    
    }

然后在我的groups.blade.php

<section class="w-1/2 ml-5">

    <p class="font-basic tracking-normal text-3xl mb-4 mt-4 font-normal text-black mr-2">Groups</p>

    @include('partials.filters.groups')

    @forelse ($groups as $group)

    <groups-view inline-template :groups="{{ $group }}">
        <article id="groups-feed" class="bg-white w-3/4 p-4 mb-2 rounded-sm shadow-md">
            <div class="flex" id="groupPicture">

                <router-link :to="{ name : 'groupView', params : { groupId : group.id , groups : group } }" tag="a">
                    <img class="h-18 w-18 rounded-full mr-4 mt-2" src="{{ asset('assets/images/'.$group->default_avatar) }}" alt="Criminals View" >
                </router-link>

                <div class="flex-1">
                    <h3 class="mt-4 font-basic text-2xl">{{  $group->display_name }}</h3>
                    <p class="mt-2">Motto :  <em class="font-basic font-bold roman">{{ $group->motto  }}</em></p>
                </div>
            </div>
        </article>  
    </groups-view>

    @empty

    <h3>No groups are added yet..</h3>

    @endforelse

    {{ $groups->links() }}

</section>


<router-view></router-view>

  

在我的route.js文件中

这是我的代码：

{   
    path : '/group/:groupId',
    name : 'groupView',
    component : GroupView,
    props :  {
        groups : {
            type : Object
        }
    }
},

我希望能够在路由器视图中传递诸如此类的数据

  

GroupView.vue

这是我输出路由器视图的地方

<template>
    <section class="w-2/5 ml-2 font-basic" id="groupView">
        <p class="font-basic tracking-normal text-2xl mb-4 mt-4 font-normal text-black mr-2">Group Profile of {{ this.group.full_name }}</p>

</template>

我应该在GroupView.vue中的脚本中传递它吗？

<script>
export default {
    props : ['groups'],

    name: 'GroupView',

    data () {
        return {
            group : this.groups
        }
    }
};
</script>

如何在GroupView.vue中显示groups.motto？