Как передать данные через Vue-Router , чтобы при обновлении дочерней страницы данные не исчезали?

Я новичок на Vue и столкнулся со следующей проблемой. Может кто то уже решал это или просто знает решение? Я через v-for создаю несколько карточек. Данные карточек я получаю из store:

<Item_Apartment
    v-for="apartment in all_Apartments" :key="apartment.id"
    v-show="apartment.id < 3"
    :apartmentsData = "apartment" />
    <router-link to="apartment" class="link">Смотреть все</router-link>
</div>
import Item_Apartment from './Item_Apartment.vue';
import { mapGetters, mapActions } from 'vuex';

export default {
   name: 'Main_HotelApartment',
   components: {Item_Apartment},
   data() {
      return {
    }
},
computed: {
    ...mapGetters([
        'all_Apartments'
    ])
},
mounted() {
    this.get_Apartments()
    // console.log(this.all_Apartments);
},
methods: {
    ...mapActions([
        'get_Apartments'
    ]),
}

У каждой карточки есть кнопка, через которую я уже по router-link передаю полученные пропсы дальше:

<router-link :to="{name: 'Item_info', params: {item: apartmentsData}}">
        <button type="button">Подробнее</button>
        </router-link>

полученные данные я использую так:

<h1>Апартамент {{ item.name }}</h1>

    <div class="info__images">
        <img :src="require('../assets/images/'+ item.src.img1)" alt="img">
    </div>
    <div class="info__description">
        <p>Площадь апартамента - {{ item.info.area }}</p>
        <p>Вместимость - {{ item.qty }}</p>
        <p>Спальные места - {{ item.info.beds }}</p>
        <h3>Техника:</h3>
        <ul v-for="(i, id) in item.info.tech" :key="id">
            <li>- {{ i.item }}</li>
        </ul>
        <h3>Кухня:</h3>
        <ul v-for="(i, id) in item.info.kitchen" :key="'a' + id">
            <li>- {{ i.item }}</li>
        </ul>
        <h3>Ванная комната:</h3>
        <ul v-for="(i, id) in item.info.bathroom" :key="'b' + id">
            <li>- {{ i.item }}</li>
        </ul>
        <h3>Также:</h3>
        <ul v-for="(i, id) in item.info.other" :key="'c' + id">
            <li>- {{ i.item }}</li>
        </ul>
        <h3>Цены на проживание в 2022 году:</h3>
        <ul v-for="(i, id) in item.info.price" :key="'d' + id">
            <li>- {{ i.item }}</li>
        </ul>

получаю их так:

export default {
name: 'Item_info',
props: ['item']
}

router выглядит так:

{
path: '/info',
name: 'Item_info',
component: () => import('../components/Item_info.vue'),
props: true
},

Они отрисовываются, но при обновлении страницы исчезают. Как мне сделать так, чтобы при обновлении страницы данные не исчезали?

Дополнение: Это JSON, который я получаю:

"apartments": [
      {
           "id": 1,
           "name": "“Студия”",
           "description": "4 этаж, 30 м2, балкон, кухня, ванная комната",
           "qty": "комфортное проживание 3-х человек",
           "beds": "большая двухспальная кровать, удобный диван",
           "src": {
                "img1": "Rectangle 4.png",
                "img2": "Rectangle 5.png"
           },
           "info": {
                "area": "30 м2",
                "beds": "большая двуспальная кровать (180х200) с основанием  Spring Box и хорошим ортопедическим матрасом. При необходимости кровать преобразовывается в два полноценных односпальных места (90х200). Удобный диван который раскладывается в спальное место. Постельные принадлежности и белье в полном комплекте.",
                "tech": [
                     {
                          "id": 1,
                          "item": "WI-FI Ростелеком"
                     },
                     {
                          "id": 2,
                          "item": "кондиционер"
                     },
                     {
                          "id": 3,
                          "item": "телевизор с приставкой Ростелеком"
                     },
                     {
                          "id": 4,
                          "item": "стиральная машинка"
                     },
                     {
                          "id": 5,
                          "item": "варочная панель на 3 конфорки"
                     },
                     {
                          "id": 6,
                          "item": "микроволновка с конвекцией и грилем"
                     },
                     {
                          "id": 7,
                          "item": "холодильник"
                     },
                     {
                          "id": 8,
                          "item": "электрический чайник"
                     },
                     {
                          "id": 9,
                          "item": "двухкамерный холодильник"
                     },
                     {
                          "id": 10,
                          "item": "утюг, фен"
                     }
                ],
                "kitchen": [
                     {
                          "id": 1,
                          "item": "кухонный гарнитур"
                     },
                     {
                          "id": 2,
                          "item": "посуда: тарелки, ложки, вилки, ножи, кастрюли, сковородки"
                     },
                     {
                          "id": 3,
                          "item": "принудительная вентиляция."
                     }
                ],
                "bathroom": [
                     {
                          "id": 1,
                          "item": "полноценная ванная"
                     },
                     {
                          "id": 2,
                          "item": "раковина"
                     },
                     {
                          "id": 3,
                          "item": "с/у, бойлер"
                     },
                     {
                          "id": 4,
                          "item": "комплект из 2х полотенец для каждого гостя"
                     }
                ],
                "other": [
                     {
                          "id": 1,
                          "item": "балкон с панорамным остеклением и лаунж-зоной"
                     },
                     {
                          "id": 2,
                          "item": "вид во двор"
                     },
                     {
                          "id": 3,
                          "item": "закрытый периметр"
                     },
                     {
                          "id": 4,
                          "item": "доступ на территорию и в корпуса через СКУД"
                     },
                     {
                          "id": 5,
                          "item": "въезд на парковку с помощью пульта."
                     }
                ],
                "price": [
                     {
                          "id": 1,
                          "item": "01.04 по 30.04 – 2 000руб/сутки"
                     },
                     {
                          "id": 2,
                          "item": "01.05 по 31.05 – 3 000руб/сутки"
                     },
                     {
                          "id": 3,
                          "item": "01.06 по 15.06 – 4 000руб/сутки"
                     },
                     {
                          "id": 4,
                          "item": "15.06 по 30.06 – 4 500руб/сутки "
                     },
                     {
                          "id": 5,
                          "item": "01.07  по 15.07 – 5 500руб/сутки"
                     },
                     {
                          "id": 6,
                          "item": "15.07 по 25.08 – 6 000руб/сутки"
                     },
                     {
                          "id": 7,
                          "item": "26.08 по 10.09 – 4 500руб/сутки"
                     },
                     {
                          "id": 8,
                          "item": "10.09 по 30.09 –  3 500руб/сутки"
                     },
                     {
                          "id": 9,
                          "item": "Октябрь – 3 000руб/сутки"
                     }
                ]
      },
      "isParking": true,
      "isConditioner": true,
      "isWi_Fi": true,
      "isTV": true
      },

Это store:

import axios from "axios"

export default {
    state: {
        apartments: [],
    },
    getters: {
        all_Apartments(state) {
            return state.apartments
        },
    },
    mutations: {
        set_Apartments_To_State(state, apartments) {
            state.apartments = apartments
        },
    },
    actions: {
        async get_Apartments(ctx) {
            try {
                const res = await 
            axios.get('http://localhost:3000/apartments')
                ctx.commit('set_Apartments_To_State', res.data)
            } catch(error) {
                console.log(error);
            }
        },        
    },
}

Ответы (0 шт):