Vue Router как передать переменную?

Question

[Anton Yurzanov]

Ребят помогите пожалуйста.
При клике по ссылке открывается другой компонент, в него через роут передается id, формируется url вида:
/adres/ID
все как надо.
но требуется в этот компонент передать еще один параметр, что бы компоненте его записать в переменную, никак не получается это сделать, опыта мало.

<router-link
                               tag="a"
                               class="button"
                               :to="{name: 'historyId', params: {id: historyItem.id, date: historyItem.date}, props: {id: historyItem.id, date: historyItem.date}}"
                               :key="historyItem.id"
                       >
                           <span class="button__icon">
                               <i class="fas fa-sync-alt"></i>
                           </span>
                           <span class="button__text">
                               Повторить
                           </span>
                       </router-link>

пытаюсь получить в компоненте:
date: this.$router.currentRoute.params['date'],
но не работает, как быть?

Comments

[alex]

В самом компоненте надо пропсы нужные определить. props: ['date']. В записи маршрута нужно выставить props:true

[Anton Yurzanov]

Alex, прописал, сейчас выглядит вот так:
прописал разрешение для роута:

{
      path: '/history/:id',
      component: HistoryId,
      name: 'historyId',
      props: true
    }

прописал в ссылке:

<router-link
                               tag="a"
                               class="button"
                               :to="{name: 'historyId', params: {id: historyItem.id, date: historyItem.date}, props: {id: historyItem.id, date: historyItem.date}}"
                               :key="historyItem.id"
                       >

прописал в принимающем компоненте:

<script>
    export default {
        props: ['date'],

но не работает (((

[alex]

Anton Yurzanov, Уберите props:{...} из router link

[Anton Yurzanov]

спасибо огромное!!!

Answer 1

[Anton Yurzanov]

и так, как это сделать:
1. надо прописать в роуте разрешение на передачу props (props: true):

{
      path: '/history/:id',
      component: HistoryId,
      name: 'historyId',
      props: true
    }

2. в route-link прописать, какие парметры хотите передать (params: {}):

<router-link
                               tag="a"
                               class="button"
                               :to="{name: 'historyId', params: {id: historyItem.id, date: historyItem.date}}"
                       >

3/ Принять эти данные в компоненте:

<script>
    export default {
        props: ['date'],

Answer 2

[Roman Alekseiev]

Передача входных параметров

Comments

[Anton Yurzanov]

это раз 10 перечитал, но не увидел, где там передают именно переменную, как выглядит код переддачи этой переменной и выглядит код вывода этой переменной в компоненте, можете подсказать?