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

提供下思路:

第一步

在router中配置属性meta的keepalive 需要缓存的页面设置未true

    

第二步

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

     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

你可能感兴趣的:(前端)