遇到的问题
在后台管理系统中,菜单是基本的组成部分,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
}
第二解决刷新数据丢失问题:
划重点:如果是PC端此处监听beforeunload没问题,如果是移动端尤其是IOS一定要使用pagehide或者unload
//app.vue页面
created(){
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
//pc端
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
//IOS端
window.addEventListener("pagehide",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
},
如果你有更高效的方法,欢迎交流哦!