vue f5刷新路由 iview中菜单刷新不变 刷新页面菜单高亮不变 vue刷新store数据丢失

遇到的问题

在后台管理系统中，菜单是基本的组成部分，ui框架也很多，看起来也都很完美，
但是，
第一：刷新后菜单恢复到初始的样子；
第二：刷新后store数据消失，页面无法加载

解决思路

通过多种尝试，最终我选择了利用事件监听，增加缓存来实现，目前视觉效果还是可以的；

第一：菜单问题解决
1、可以在生命周期created中通过监听beforeunload事件，
2、将当前打开的一级和二级菜单保存一下，注意：由于二级页面只能打开一个，可是一级页面可以展开多个，所以此时需要注意，一定要保证二级菜单由一级菜单name和二级菜单name组成，比如一级菜单为： name=1,那么相对应他下面的二级菜单name=1-1,
1-2……，iview官网这么写也是有原因的，哈哈……； 所以保存一二级菜单时，一定要通过当前的二级菜单推断出一级菜单，这样刷新后保证只有当前页面的二级和一级菜单是展开的；
3、在beforeunload监听事件外部，就是在页面加载时，判断是否有缓存，如果有，就给
菜单赋值；记得用完随时清除缓存哦！

第二： 路由问题解决
1、其实比较简单啦，类似菜单的方法，在app.vue文件created 事件中添加事件监听beforeunload，将store中的数据保存，然后有缓存就取出嘛；

具体代码

啰嗦那么多，估计我也没表达明白，直接上代码：
第一菜单问题：

//菜单页面
data(){
            return{
                activeName: '',
                openName: [],
            }

        },
created(){           
      window.addEventListener("beforeunload",()=>{
           sessionStorage.setItem('openState', this.activeName.split('-')[0]) 
           sessionStorage.setItem('activeState', this.activeName) 
       });

        let activeState = sessionStorage.getItem('activeState');
        let openState = sessionStorage.getItem('openState');
        if(activeState!=''){
            this.openName = [];
            this.activeName = activeState;
            this.openName.push(openState);
        };
        sessionStorage.clear();

    },
  //当前所在二级菜单  @on-select事件
   activeMenu(name){
        console.log("二级菜单"+name);
        this.activeName = name
        // this.$router.replace(name);
    },
    //当前所在一级菜单 @on-open-change事件
    selectMenuItem(name){
        console.log("一级菜单"+name);
        this.openName = name
    }

第二解决刷新数据丢失问题：

//app.vue页面
  created(){
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  },

如果你有更高效的方法，欢迎交流哦！