划分组件中的vue-router参数

Question

我有以下视图：

<template>
  <div class="home">
    <Quiz :quizID="this.$route.params.id"/>
    <p>{{this.$route.params.id}}</p>
  </div>
</template>

this。$ route.params.id的值在＆lt; p＆gt;标签之间正确显示。但是上面的组件不能将此值作为参数。如果我通过编写＆lt; quiz：quizid =“ 3”/＆gt;来强制它，它可以显示与相应ID的组件QUIZ。

但是，一旦我放了一个变量，就没有什么可用。

编辑：如建议，这是QUIZ组件

<div>
    <div class="container flex justify-center mx-auto">
    <div class="flex flex-col">
        <div class="w-full">
            <div class="border-b border-gray-200 shadow">
                <table>
                    <tbody class="bg-white">
                        <tr class="whitespace-nowrap" v-for="player in players" :key="player.quizID">
                            <td class="px-6 py-4 text-sm text-gray-500" v-if="player.quizID === quizID">
                                {{player.quizID}}
                            </td>
                            <td class="px-6 py-4" v-if="player.quizID === quizID">
                                {{player.name}}
                            </td>
                            
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
</template>

<script>
export default {
    name: 'Quiz',
    data(){
    return {
      quizzes: [],
      players: []
    }
  },
    props: [
        'quizID'
    ],
    methods: {
    async fetchQuizzes() {
      const res = await fetch(`http://127.0.0.1:8000/api/quizs`)
      const data = await res.json()
      return data.data
    },
    async fetchPlayers() {
      const res = await fetch(`http://127.0.0.1:8000/api/players`)
      const data = await res.json()
      return data.data
    }
   
    },
    async created(){
    this.quizzes = await this.fetchQuizzes();
    this.players = await this.fetchPlayers();
    },
    
}
</script>

有什么问题？