Vue动态切换类名

Vue切换类名比较麻烦，有两种比较常用的方法

1. 监听组件的切换进行类名的切换

<router-link to="hotplay">
        <div class="btn fl " :class="{navTabAct:curIndex==0}" >正在上映</div>
        </router-link>
        <router-link to="comingplay">
        <div class="btn fl" :class="{navTabAct:curIndex==1}">即将上映</div>
        </router-link>

watch:{
//          监听路由的变化
            $route(newValue){
                console.log(newValue)
//              使用正则检测fullPath里面是否有对应的字符串,有则返回true
                if(/hotplay/.test(newValue.fullPath)){
                    this.curIndex=0;
                }else
                if(/comingplay/.test(newValue.fullPath)){
                    this.curIndex=1;
                }
            }
        }

提一提watch侦听器的语法

watch:{
    funtion(newValue,oldValue){
    //每次触发监听器都能得到现有的值和变化前的值
}
}

改变svg 颜色：类名 svg g{color:red}

2. 使用Vue本身所有的类名

当路由被激活时，路由会被添加两个类名，分别是router-link-exact-active和router-link-active，复写这两个类名，可以得到想要的结果

一般不建议使用这种方法，因为在复写这两个类名后，当激活其他组件时，会使该组件的这两个类名被撤销，转移到被激活的组件上

路由在刷新后，会发生类名回滚的情况，这是因为刷新页面后，类名会变回默认值，这时就应在生命钩子中改变类名默认值

mounted(){
                if(/hotplay/.test(this.$route.fullPath)){
                    this.curIndex=0;
                }else
                if(/comingplay/.test(this.$route.fullPath)){
                    this.curIndex=1;
                }
            
        }