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')
         }
       }

固然你也可使用路由的全局后置守卫作到一样的效果，不过咱们当时考虑到的是逻辑相关性，因此才采用监控的方式。

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

我本身建了一个web前端的交流裙有兴趣的能够加入进来交流哦：237871108。固然你也能够经过哔哩哔哩搜索木瓜太香找到我。