Есть файл index.js(представляющий собой экземпляр vue router):
import VueRouter from 'vue-router'
import List from '../pages/List'
import Zabor from '../pages/Zabor'
import Item from '../pages/Item'
export default new VueRouter({
mode: 'history',
routes: [
{
path:'/',
name: 'list',
component: List
},
{
path:'/zabor',
name: 'Zabor',
component: Zabor
},
{
// парметр id - номер заказа
path:'/item/:id',
name: 'Item',
component: Item,
props: true
},
]
})
Есть файл Item.vue(Страница представляющая из себя карточку, в которой должны отображаться данные по текущему заказу):
<template>
<div class="listCard">
<router-link to="/">Вернуться к таблице</router-link>
<h1>Карточка заказа №{{ id }} от {{ itemInfo.createdAt }}</h1>
<div class="info">
<p>Номер заказа - </p>
<p>Статус заказа - </p>
<p>Способ доставки - </p>
<p>Населенный пункт - </p>
<p>Дата последнего изменения - </p>
</div>
<hr>
<p>Cтоимость - <strong></strong></p>
</div>
</template>
<script>
export default {
props: {
id: String,
},
computed: {
// поиск выбранной записи из массива с заказами по номеру id
itemInfo() {
return this.$store.state.orders.find(item => item.shop_id == this.id)
}
}
}
</script>
<script>
export default {
props: {
id: String,
},
}
</script>
Здесь входной параметр id передается из компонента ordersTable с помощью конструкции(смотрите ниже), вычисляемое свойство itemInfo возвращает строку данных выбранного заказа
Есть компонент таблицы ordersTable(представляющий из себя таблицу всех заказов), в которой при нажатии на номер заказа происходит переход на страницу карточки выбранного заказа,т.е. в ней отображается вся инфа по заказу. Данную привязку сделал так:
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'shop_id'">
<span @click="$router.push({ name: 'Item', params: {id: props.row.shop_id, test:'test'}})" class="link">{{props.row.shop_id}}</span>
</span>
</template>
Уточнение! Данные для таблицы прилетают из vuex store, а в store данные попадают от сервера.
Теперь при выборе какого-либо заказа происходит переход на карточку этого заказа и все необходимые данные отображаются как надо, однако после перезагрузки страницы свойство id отображается как надо, а свойство itemInfo не отображается, в консоль выпадает ошибка якобы itemInfo это null. Как передать данные по заказу, чтобы при перезагрузке станицы они отображались.
Дополнение! Пробовал получать данные по заказу в файле Item.vue с помощью get запроса на сервер, все получилось. Однако если данные приходят из store, то после перезагрузки они исчезают.