Хранение реквизита данных при обновлении страницы

Question

Я все еще немного растерялся по поводу реквизита VueJS и обмена данными.Скажем, у меня есть этот простой компонент, он отображает список профилей.У каждого профиля будет своя собственная страница, определяемая его именем и связанная с помощью ссылки на маршрутизатор.

<template>
    <div class="card">
        <div class="card-body">
            <table class="table">
                <tbody>
                    <tr>
                        <th>Profile ID</th>
                        <th>Actions</th>
                    </tr>
                <tr v-for="profile in profiles.data" :key="profile.id">
                    <td>{{profile.id}}</td>
                    <td>
                        <router-link :to="{ name: profile.name, params: {
                             profileImage: profile.image }}" 
                             tag="a" exact> View Profile
                        </router-link>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                profiles: {}
            }
        },
        methods: {
            loadProfiles() {
                axios.get("api/profile").then(({data}) => (this.profiles = data));
            },
        created() {
            this.loadProfiles();
        }
    }
</script>

Так что, когда вы нажимаете на ссылку профиля, я оказываюсь на странице типа localhost: 8000 / profile-1, в зависимости от имени профиля (в данном случае я предполагаю, что это имя профиля-1).Вы заметите, что я передаю параметр profileImage, это местоположение файла изображения, связанного с этим профилем.

Таким образом, общий компонент профиля выглядит примерно так:

<template>
    <div id="capture">
        <div class="row">
            <div class="col-12` ">
                <image :file-name = this.fileName></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Image from '../components/Image';

    export default {
        components: {
            'image': Image
        },
        data() {
            return {
                fileName: ''
            }
        },
        created() {
            this.fileName = this.$route.params.fileName;
        }
    }
</script>

Так довольно просто, содержиткомпонент Image, который будет отображать изображение для этого профиля.И я не буду показывать все это, но компонент Image принимает следующую структуру

<template>
    <div>
        <div id="chart">
            <div id="barchart-container">
            </div>
        </div>
    </div>
</template>

<script>
    import * as d3 from 'd3';

    export default {
        props: {
            fileName: {
                type: String,
                required: true
            }
        },
        methods: {
            generateImage () {
               ...   
            }
        },
        created() {
            this.generateImage();
        }
    };
</script>

Так что мой вопрос заключается в следующем: если я нажму на ссылку, я окажусь на странице профиля.Это отображает изображение.Это все хорошо.Однако, если я затем обновлю страницу, изображение больше не будет отображаться, и я получу сообщение об ошибке, указывающее, что компоненту нужна его опора.

Итак, что мне нужно сделать, чтобы опора не терялась при обновлении страницы.Это даже правильный подход, который я использую?

Спасибо