vuejs导航条动态切换active状态

1. 用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历
2. 重点是在：routerLink(index, path)函数，传入当前点击的下标，自定义一个下标，判断是否相等就用三元符号判断多给一个高亮样式
3. 如何解决刷新就不高亮或第一个高亮了，很简单，监听一下当前路由在判断就好了

具体代码都在下面了

效果图：

html代码：

     <ul>
         <!-- 导航列表 -->
        <li class="nav-item"
                  v-for="(item, index) in nav"
                    @click="routerLink(index, item.path)"
                    :key="index">
                    <!-- 判断高亮表 -->
                    <p :class=" navIndex === index ? 'active' : ''">
                    {{ item.title }}
                    </p>
         </li>                                         
     </ul>                

 data数据：

data(){
        return{
            nav:[
                {title:'首页',path:'/'},
                {title:'产品服务',path:'/Product'},
                {title:'关于我们',path:'/About_us'}
            ],
            navIndex:0
        }
    },

methods方法：

 

/**
 * 路由跳转
 * @param index
 * @param link
*/
routerLink(index, path) {
 // 点击哪个路由就赋值给自定义的下下标
 this.navIndex = index;
 // 路由跳转
 this.$router.push(path)
},
 
/**
 * 检索当前路径
 * @param path
*/
checkRouterLocal(path) {
 // 查找当前路由下标高亮
 this.navIndex = this.nav.findIndex(item => item.path === path);
}

监听路由变化获取当前路由

watch: {
 "$route"() {
 // 获取当前路径
 let path = this.$route.path;
 // 检索当前路径
 this.checkRouterLocal(path);
 }
},

active样式

    .active{color:#345AFA;}