vue 单页面应用如何实现状态保存和刷新

提供下思路：

第一步

在router中配置属性meta的keepalive 需要缓存的页面设置未true
<keep-alive>
    <router-view v-if="$route.meta.keepalive" class="full" />
</keep-alive>
<router-view v-if="!$route.meta.keepalive" class="full" />

第二步

在根页面监听路由变化,根据是否需要刷新，设置路由中的数据

     watch: {
        $route (to, from) {

             if(to.query.keep == true){
                to.meta.refresh = false;
            }else {
                to.meta.refresh = true;
            }
         
        }
    }

第三步

在需要缓存的页面中添加钩子函数

    activated () {
        if (this.$route.meta.refresh) {
            console.log('刷新')
        } else {
            console.log('keep')
        }
    }

第四部

当其它页面使用push跳转的时候当需要刷新添加参数keep=true