Как управлять обновлением страницы пользователя с помощью Vuejs / Vue-Router

Question

Я строю SPA (мой первый!) С VueJS / Laravel, чтобы представить информацию о вредителях сельскохозяйственных культур производителям.На домашней странице новое представление заполняется списком вредных организмов из базы данных;нажатие на любой данный вредный организм вызывает новое представление, содержащее информационный лист об этом вредном организме.

Все работает так, как я надеялся, но если я обновлю окно браузера, когда активен любой из двух последних видов, все, что я получу, этосписок объектов javascript, который «подпитывает» представление.

Как защититься от такого типа действий пользователя?

Я не уверен, какую часть моего кода представить;если это поможет, мой код маршрутизатора здесь:

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Vue.component( 'Home', require( './components/Home.vue' ) )
        },
        { path: "/pest", component: Vue.component( 'Pest', require( './components/Pest.vue' ) ), children:
            [
                {
                    path: '',
                    name: 'pestnoteslist',
                    component: Vue.component( 'PestNotesList', require( './components/PestNotesList.vue' ) )
                },
                {
                    path: '/pest/:id',
                    name: 'pestnotes',
                    component: Vue.component( 'PestNotes', require( './components/PestNotes.vue' ) ),
                    props: true
                }
            ]
        },

        { path: '*', redirect: "/"}     // { path: '*', redirect: {name: 'home'}}
    ]
});