Vue. js Ожидается, что будут определены параметры ссылки на маршрутизатор, но при этом возникает ошибка браузера. «Отсутствует параметр для именованного маршрута». : ожидается <param>будет определено

Question

Привет. Я пытаюсь использовать 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>

Маршруты. 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" будет определено

Это странно, потому что я передаю идентификатор команды в качестве параметра на маршруте, и это приводит меня к компоненту AddWeek, как я и ожидал.

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

2: однако я не могу получить данные как свойство или элемент данных в компоненте.

Answer 1

Ошибка указывает на то, что проигрыватель _id не готов при первом рендеринге компонента, возможно это асинхронные c данные. Попробуйте 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    
}]

Вам также необходимо создать реквизит team1 в addWeek.

Answer 2

Нажмите ссылку Расписание здесь, чтобы просмотреть пример

Что касается начальной ошибки Chrome, Дэн был прав, что данные были асинхронными c и, следовательно, не отображались при начальной загрузке , Теперь это решено в этом решении.

В конечном итоге я хотел, чтобы из компонента было передано несколько параметров. Чтобы выполнить это sh, я использовал «query» вместо «params» в «router-link». Остальная часть кодового блока включена для уточнения передаваемых параметров.

Родительский компонент:

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