vue、react等SPA应用页脚组件闪烁的解决办法

大家好，我是木瓜太香。大家在开发单页应用的时候，经常会遇到这样的需求，头部和尾部两个组件是大多数组件公用的，而中间的内容区域则是单独存在的，而且一般内容组件逻辑会比较多，如果我们不停刷新页面可能会出现尾部组件闪烁的问题。

这个问题的出现主要是因为，内容区组件要比尾部组件大，而且尾部组件一般是没有什么逻辑的，相当于一个静态组件。

解决这个问题的思路就是想办法在页面最开始加载的时候隐藏尾部组件，之后再合适的时候将尾部组件显示出来即可。

说一下公司项目（VUE）中的解决办法，我们的思路是，先让尾部组件固定定位到页面外部，这样在最开始加载的时候就看不到尾部组件，然后我们通过监听路由变化来让组件显示，具体做法如下。

1. 定义类名 .footer-fixed 将该类名添加到 footer 组件上

   .footer-fixed {
     position: fixed;
     bottom: -200px;
   }
   

2. 利用 vue 中的 watch 监听路由，恢复 footer组件的显示

       $route: {
         handler () { // 组件加载完成之后将隐藏的底部显示出来
            const footerDom = document.getElementsByClassName('footer')[0]
            footerDom.classList.remove('footer-fixed')
         }
       }
   

当然你也可以使用路由的全局后置守卫做到同样的效果，不过我们当时考虑到的是逻辑相关性，所以才采用监控的方式。

更多前端技巧可以关注一下哔哩哔哩：木瓜太香