vue 在safari動態多級面包屑導航樣式不刷新的bug

前言：

　　最近做公司的管理系統，用到了elementUI 里面的 bread面包屑組件，本來一切好好的，誰知道mac的safari樣式全部緩存了，硬是下面這種效果，真頭疼

　　

　　而chrome,QQ均顯示正常

　　

　　

解決過程：

   　我刷新頁面后，safari樣式就會正常了，所以這個絕壁是safari緩存導致的，首先想到了reload刷新頁面

解決辦法：

　　1.reload強刷頁面，前面有一篇文章是vue里面reload的博客，用watch監聽路由，每次路由變化都會刷新頁面。

　　　　

 watch: {
    $route (newVal, oldval) {
      if (newVal.path != oldval.path) {
        this.reload()
      }
      this.getBreadcrumb()
    },

　　但是問題來了，這樣頁面每進入一個新路由都會閃一下，把chrome里面也弄的閃了，用戶體驗性很差，為了這個小小的面包屑犧牲大多數瀏覽器用戶體驗也不好，只寫safari下的兼容也會導致使用mac的人體驗很差

　　堅決不放棄尋求更好的辦法來解決，功夫不負人心，終於被我找到了，刷新組件+watch監聽結合，如下：

     2. 強制刷新組件（靈感來自於這篇博客：vue強制刷新某組件（銷毀並重置））

　　　思路：大概是把需要渲染的內容用v-if讓它重排，這樣每次進入新路由，面包屑導航必定要重排，這樣就可以解決safari下的緩存問題了

　　具體代碼：

　　

　　

 　　備注：其實不用watch監聽，只需要 v-if 重排；

　　　　　 watch 這里監聽的是數組，先寫在這兒，方便自己記憶。

     3. 刷新組件另外一種方法

　　  思路：在父子間中每次渲染子組件的時候使用時間戳，注意使用計算屬性

　　

　　

　　

　　以上三種方法都可以解決safari下的組件樣式緩存問題！又不會導致頁面每次都閃一下了！

　　找了兩三天終於解決了，記錄下來給大家，遇到類似的問題可以從中得到一些靈感！