如何使用Vuejs / Vue-Router

Question

我正在使用VueJS / Laravel构建SPA（我的第一个！），以向种植者展示农作物有害生物信息。在主页上，新视图填充了一个有害生物的数据库外列表。单击任何给定的有害生物都会触发一个新视图，其中包含有关该有害生物的概况介绍。

一切都如我所愿，但是如果在后两个视图中的任何一个处于活动状态时刷新浏览器窗口，则得到的只是为视图加油的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'}}
    ]
});