【vue】页面缓存回跳后 侧边栏z-index层级导致页面快闪

问题描述

公司使用的帆软报表页面没有加keepAlive缓存，在从一个弹框页面跳转到子报表后，切换路由回到当前页面是会继续展示弹框页面，但是页面由于z-index层级问题会闪一下。

问题排查

经过代码查看是因为导航栏小箭头使用了定位，z-index=2的原因导致

解决方案

1 既然是因为z-index的原因，先尝试把z-index取消，取消后发现当导航栏页签变多的情况下，没有层级小箭头会被遮挡掉，同时箭头的事件也失效。这个方法不太行

2 缓存下钩子函数activated
在组件被激活时使用，当切换回页面的时候，该钩子函数被调用

 activated() {
    if (this.dialogVisibleAudit) {
      this.dialogVisibleAudit = false;
      setTimeout(()=> {
       this.dialogVisibleAudit = true;
      },300)
    }
  },

判断弹框是否存在，若存在先将弹框取消，然后使用定时器再展示弹框；这样没有了最开始的问题，但是页面闪烁更加诡异，这个方法也是不太行的样子

3 既然是层级的问题，那我们可以先把小箭头的层级设置为0，然后再给加上，这样也不会影响到小箭头的点击。这样就可以很好的解决最开始的问题。

 activated() {
    if (this.dialogVisibleAudit) {
      let dom  = document.getElementsByClassName('roll-nav');
      dom[0].style.zIndex = '0';
      dom[1].style.zIndex = '0';
      dom[2].style.zIndex = '0';
      setTimeout(()=> {
        dom[0].style.zIndex = 2;
        dom[1].style.zIndex = 2;
        dom[2].style.zIndex = 2;
      },300)
    }
  },