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。固然你也能夠經過嗶哩嗶哩搜索木瓜太香找到我。