router-link标签的选中激活导航router-link-active

 router-link: 其中tag='div'表示router-link为div标签
 

<template  v-for="(item,index) in arr" v-if="arr.length>0">
        <router-link tag="div" class="tab_item flex_between_center" :to="item.path" :key="index">
                <span class="tab_span inline-block">{{item.title}}</span>
        </router-link>
</template>    

 

 .tab_item{        
        &.router-link-active{    //表示router-link激活选中时的状态
            .tab_span{
                color: red;
                border-bottom: 1px solid red;
            }
        }
    }

 

    {
        path:"/",
        redirect:"/recommend"   //让router-link的router-link-active默认执行/recommend的导航
    },{
        path:"/recommend",
        name:"recommend",
        component:() => import('@/views/recommend.vue') 
    },