异常 "Symfony\Component\HttpKernel\Exception\NotFoundHttpException"

Question

在 Laravel-8
中使用 Vue(SPA) 我正在尝试使用事件并从组件中获取一些数据，但未获取数据，我收到的错误是：- 404

exception "Symfony\Component\HttpKernel\Exception\NotFoundHttpException"

这是我用来发送 DisplayMessages 事件请求的 Contacts.vue：-

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Contacts List</div>

                    <div class="card-body">
                        <ul v-for="contact in contacts" :key="contact.id" >
                           <li>
                           <button @click="displayMesages(contact.id)"> 
                                
                               {{contact.name}} 
                            
                           </button>
                           </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                contacts: []
            }
        },
        mounted() {
            axios.get('/api/contacts-list')
            .then(response => this.contacts = response.data)
        },
        methods: {
            displayMesages(id){
                console.log(id);
                DisplayMessages.$emit('refresh', id);
            }
        }

    }
</script>

这是接收请求的DisplayMessages.vue：-

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Display Messages</div>

                    <div class="card-body">
                        <h2 v-for="message in messages">{{message.message}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // import contacts from './ContactsList.vue'; 
    export default {
        data() {
            return {
                contacts: [],
                messages: []
            }
        },
        mounted() {
            DisplayMessages.$on('refresh', (id)=>{
                axios.get('/api/display-message/'+ id).then(response => this.messages = response.data)
            });
        }
    }
</script>

这是 DisplayMessages 正在获取的路由：-

Route::get('/api/display-messages/{id}', [App\Http\Controllers\ChatsController::class, 'displayMessages']);

这是控制器：-

public function displayMessages($id)
    {
        return Chats::all();
        
            }

Answer 1

这条路线真的存在吗？return什么东西？

/api/contacts-list

Answer 2

axios路由中的DisplayMessages.vue有打字错误:-

mounted() {
            DisplayMessages.$on('refresh', (id)=>{
                axios.get('/api/display-message/'+ id).then(response => this.messages = response.data) //It should be '/api/display-messages/`
            });
        }

异常 "Symfony\Component\HttpKernel\Exception\NotFoundHttpException"

exception "Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException"

javascript

laravel

single-page-application

axios

vuejs2