vue 导航栏状态即时更新

我们在做头部导航或者侧边导航的时候，有时会遇到高亮状态更新不上的问题。

image.png

解决方法有两种：第一可以通过存缓存来获取状态，第二可以监听路由。本文主要针对第二种方法详细解答一下：

小伙伴们首先可能想到的是watch监听$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;
            }
        }

加关注不迷路，小礼物走一走