VueJS 给出未捕获（承诺中）错误：在 vue-router 中缺少必需的参数“name”，但参数在那里

Question

代码（VueJS 3，Composition API/脚本设置/Vuetify）：

<v-window v-model="tab">
    <v-window-item value="one" style="height: 50vh;">
        <div class="pa-3">
            <v-table>
                <thead>
                   <tr>
                       <th class="text-left">Game</th>                                            
                   </tr>
                </thead>
                <tbody>
                    <tr v-for="game in games" :key="game">                                                                                    
                    <td><!-- IF NOT COMMENTED, WILL GIVE THE ERROR
                       <router-link :to="{name: 'Play', params: { name: username.name, mdbid: username.id, starter: true } }">
                       <v-btn color="primary" @click="currentGame = Cards">Jogar</v-btn>
                       </router-link> IF NOT COMMENTED, WILL GIVE THE ERROR -->                                                
                    </td>
                </tr>
            </tbody>
        </v-table>
    </div>
    </v-window-item>
        <v-window-item value="two" style="height: 50vh;">
            <div class="pa-3">
                <v-table>
                    <thead>
                        <tr>
                            <th class="text-left">Game</th>                                            
                        </tr>
                    </thead>
                    <tbody>
                    <tr v-for="game in games" :key="game">                                            
                    <td>
                    <router-link v-if="username" :to="{name: 'Play', params: { name: username.name, mdbid: username.id, starter: true } }">
                       <v-btn color="primary" @click="currentGame = Cards">Jogar</v-btn>
                    </router-link>
                    </td>
                </tr>
            </tbody>
        </v-table>
    </div>
 </v-window-item>
</v-window>

为什么第一个循环会出现此错误，如果与第二个循环相同，除了最后一个参数为 false 之外，并抱怨名称参数？

路由器：

{ 
      path: '/play/:name/:mdbid/:starter',
      component: Play,
      name: 'Play',
      meta: {
          title: 'Play'
      }
    }

为什么它在第二个循环中有效，但在第一个循环中却使应用程序崩溃？有什么提示吗？

Answer 1

两个循环之间的主要区别在于，在第二个循环中，您有一个 v-if 条件，用于在渲染 .这表明用户名在某些时候可能为空或未定义，这可能是导致错误的原因：

只需将 if 语句添加到第一个循环即可：

<router-link v-if="username" :to="{name: 'Play', params: { name: username.name, mdbid: username.id, starter: true } }">
   <v-btn color="primary" @click="currentGame = Cards">Jogar</v-btn>
</router-link>