Vue.js 路由器链接参数应被定义，但出现浏览器错误“命名路由 <route_name> 的缺少参数：应定义 <param>答案

【问题标题】：Vue.js router-link params expected to be defined but getting browser error "missing param for named route <route_name>: expected <param> to be definedVue.js 路由器链接参数应被定义，但出现浏览器错误“命名路由 <route_name> 的缺少参数：应定义 <param>
【发布时间】：2020-03-23 19:28:46
【问题描述】：

您好，我正在尝试使用 Vue.js router-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/5e6bc31785aa8e5ab4575d80

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

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案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 属性。

【讨论】：

这个答案解决了你的问题吗？请勾选此答案，这也将对其他人有所帮助。你可以这样做like this。或者让我知道是否有任何不清楚的地方。

【解决方案2】：

Click Schedule Link Here to View Example

关于最初的 Chrome 错误，Dan 是正确的，数据是异步的，因此不会在初始加载时呈现。这个解决方案现在解决了这个问题。

我最终希望从组件中传入多个参数。为了做到这一点，我在“路由器链接”中使用了“查询”而不是“参数”。包含其余代码块是为了澄清正在传递的参数。

父组件：

<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>

routes.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
        }

【讨论】：