Vue.js 路由器链接参数有望定义，但出现浏览器错误"命名路由缺少参数<route_name>：预期<param>定义

Question

嗨，我正在尝试使用Vue.jsrouter-link将参数动态传递到组件中。我收到一个浏览器错误，说没有定义参数，即使路由器URL与参数一起正确显示。组件也会被渲染，但数据在组件中似乎无法作为属性或数据元素访问。

这是我的路由器链接表：

<sui-table-row v-for="(player, i) in allPlayers" :key="i">
<sui-table-cell>{{player.league}}{{i+1}}</sui-table-cell>
<sui-table-cell>{{ player.player1 }}&{{player.player2}}</sui-table-cell>
<sui-table-cell selectable v-for="(week, j) in allDates" :key="j">
<router-link :to="{ name: 'addWeek', params: {team1: player._id } }">
{{player.schedule[j]}}
</router-link>
</sui-table-cell>
</sui-table-row>

Routes.js

import AddWeek from '@/views/admin/addWeek.vue';
const routes = [{      
path: '/ncl-schedule/addWeek/:team1',      
name: 'addWeek',      
component: AddWeek    
}]
export default routes

我有两个问题：

1:Chrome正在抛出以下错误：

[vue-router]缺少命名路由"addWeek"的参数：需要定义"team1">

这很奇怪，因为我在路由上获得了作为参数传递的团队id，它将我带到了AddWeek组件，正如我所期望的那样。

http://localhost:8080/ncl-schedule/addWeek/5e6bc31785a8e5ab4575d80

2：但是，我无法将数据作为组件中的属性或数据元素获取。

Answer 1

错误表明播放器_id在组件首次渲染时没有准备好，可能是异步数据。在您的链接上尝试v-if：

<router-link v-if="player && player._id" :to="{ name: 'addWeek', params: {team1: player._id } }">

在目标组件中的this.$route.params处访问参数。如果您愿意，可以通过使用props: true选项定义路线来自动将其转换为道具：

const routes = [{      
path: '/ncl-schedule/addWeek/:team1',      
name: 'addWeek',      
component: AddWeek,
props: true    
}]

您还需要在addWeek中创建team1道具。

Answer 2

单击此处的时间表链接查看示例

关于最初的Chrome错误，Dan正确地认为数据是异步的，因此在初始加载时没有呈现。此解决方案现已解决此问题。

我最终希望从组件传递多个参数。为了实现这一点，我在"路由器链接"中使用了"query"而不是"params"。代码块的其余部分包括在内，用于澄清正在传递的参数。

父组件：

<sui-table-row v-for="(players, i) in allPlayers" :key="i">
<sui-table-cell>{{players.league}}{{players.teamNumber}}</sui-table-cell>
<sui-table-cell>{{ players.player1 }}&{{players.player2}}</sui-table-cell>
<sui-table-cell selectable v-for="(week, j) in allDates" :key="j">
**<router-link :to="{ name: 'addWeek', query: {selectedTeam: players, week: week.weekId, match: players.schedule[j] } }">
{{players.schedule[j]}}
</router-link>**
</sui-table-cell>
</sui-table-row>

路由.js

const routes = [{      
path: '/schedule/addWeek',      
props(route) {
return route.query || {}
},
name: 'addWeek',      
component: AddWeek    
}]

最后，在我想访问的组件中，我从安装的钩子内的路由中检索到了数据，如下所示：

消耗组件：

async mounted() {
// this is the team in the players field who's week's matches were chosen.
this.selectedTeam = this.$route.query.selectedTeam
// teams clicked on
this.teamsPlayed = this.$route.query.match
// this is the week the matches take place - intersection of selectedTeam, date
this.schedule.weekId = this.$route.query.week
}