转载：vue 路由导航动态设置当前菜单的高亮状态

<template>

<div id="home">

        <home-view></home-view>

        <news-view></news-view>

        <router-link to="./HomeCon"></router-link>

        <router-link to="./NewsCon"></router-link>

        <ul>

        <li  class="nav-item" v-for="(item,index) in nav" @click="routerLink(index, item.path)" :key="index">

        <p :class="navIndex === index ? 'item-cn item-cn-active' : 'item-cn'"> {{ item.title }}</p>

        </li>

        </ul>

        <router-view></router-view>

</div>

</template>

<script>

export default{

  name:"Home",

  data(){

  return{

  nav: [

      {title: '首页', path: '/'},

      {title: '列表', path: '/list'}

    ],

    navIndex: 0

  }

  },

  methods:{

  routerLink(index, path) {

  // 点击哪个路由就赋值给自定义的下标

  this.navIndex = index;

  // 路由跳转

  this.$router.push(path)

}

  }

}

</script>

<style scoped>

</style>

原文：https://blog.csdn.net/weixin_42220315/article/details/80662113