我們在做頭部導(dǎo)航或者側(cè)邊導(dǎo)航的時候，有時會遇到高亮狀態(tài)更新不上的問題。

image.png

解決方法有兩種：第一可以通過存緩存來獲取狀態(tài)，第二可以監(jiān)聽路由。本文主要針對第二種方法詳細解答一下：

小伙伴們首先可能想到的是watch監(jiān)聽$route，但是在這我不推薦使用watch，因為watch如果用戶刷新頁面的情況下，會兼聽不到。我們用的是 window.location.pathname

代碼如下

active 就是代表高亮的name

image.png

      mounted(){
            var p = window.location.pathname
            switch(p) {
                case '/home': 
                this.active = '1'
                break;
                case '/attackQuery': 
                if(this.$route.query.tab){
                   this.active = '6-'+ this.$route.query.tab
                }
                break;
                case '/safetyCenter': 
                if(this.$route.query.tab){
                   this.active = '5-'+ this.$route.query.tab
                }
                break;
                case '/protect': 
                if(this.$route.query.tab){
                   this.active = '4-'+ this.$route.query.tab
                }
                break;
            }
        }

加關(guān)注不迷路，小禮物走一走