Как сохранять пропс при перезагрузки страницы?

Question

[Rufix]

Привет. Имеется страница с вакансиями и json файл, в котором они хранятся.

Я из json файла вывожу циклом все вакансии и для каждой задаю router-link с передачей пропсов данной вакансии. Внутри компонента я принимаю эти пропсы и вывожу данные - все нормально. Но при перезагрузки страницы она пустая, данных нет. Оно понятно почему, ведь мы не передали никаких пропсов, но как можно избавиться от этой проблемы?

Код со списком вакансий:

<router-link
                        :to="{ name: 'Vacancy', params: { vacancyID: item.id, vacancy: item } }"
                        class="vacancies-item flex items-center"
                        v-for="item in vacancies"
                        :key="item.id"
                    >
                        <div class="vacancies-info w-full flex items-center justify-between">
                            <span class="vacancies-title w-2/5">{{ item.title }}</span>
                            <span class="vacancies-region w-1/4">
                                {{ item.region.country }},
                                {{ item.region.city }}
                            </span>
                            <span class="vacancies-salary w-1/4">{{ item.salaryGap }}</span>
                        </div>
                        <font-awesome-icon class="vacancies-button" icon="long-arrow-alt-right" />
                    </router-link>

До перезагрузки:


После:

Answer 1

[Edheldor]

Вижу два варианта:

1. В хуке created компонента брать присланные пропсы и пихать их куда-нибудь в стор. Там же (в created) реализовать логику, что если пропсов нету, а в сторе информация есть, то вытаскивать данные из стора и показывать в компоненте. При простой перезагрузке страницы поможет показать ту-же вакансию, что и была до перезагрузки
   
2. Или в том-же хуке created компонента, при пустых пропсах, просто перенаправлять назад, на страницу со списком вакансий