vue 使用:class切换高亮 点击路由跳转 上个组件的点击事件保存的参数 在下一次重复进入这个组件的时候 默认值都已经还原了 得通过路由跳转的时候 把上个组件的状态通过路由保存下来 通过下一次进入这个组件的时候 获取路由 渲染当前页面的:class 进行高亮

第2种方式 通过组件库属性直接操作
      <div class="nav">
        <router-link
          :to="item.path"
          v-for="(item, index) in navData"
          :key="index"
        >{{ item.name }}11</router-link>
      </div>

    .router-link-active {
      background-color: rgba(68, 142, 246, 1);
      color: #ffffff;
    }

第1种方式
<template>
  <div class="header">
    <div class="box"></div>
    <div class="content">
      <router-link
        to="/home1"
        active-class="active"
      ><span>博之亿</span></router-link>
      <div class="nav">
        <ul>
          <!-- @click="$router.push({ path: item.path }), (active = index)" -->
          <!-- :class="{ nav_index: active === index }" -->
          <!-- 给当前li加样式 给其他li去样式-->
          <li
            v-for="(item, index) in navData"
            :key="item.name"
            @click="test(item, index)"
            :class="{ nav_index: active == item.name }"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navData: [
        { name: "首页1", path: "/home1" },
        { name: "人才网校", path: "/home2" },
        { name: "商务合作", path: "/home3" },
        { name: "关于我们", path: "/home4" },
        { name: "新闻中心", path: "/home5" },
        { name: "招贤纳士", path: "/home6" },
      ],
      //默认渲染第1个
      active: "首页1",
    };
  },
  watch: {
    "$route.path": {
      handler(val) {
        console.log(this.$route.query.name,"菜单：", val);
        // this.selectTag = val;	//val是路由跳转的path
        this.active = this.$route.query.name
      },
      immediate: true //立即执行
    }
  },
  methods: {
    test(item, index){
      this.$router.push({ path: item.path, query: {name: item.name}});
      var obj = JSON.stringify(item.name) 
      let objClone = JSON.parse(obj)
      this.active = objClone
      console.log(this.active,"我正在测试 active",index,"11",this.active == index,"22",item.name)
    }
  }
};
</script>

<style lang="less">
.header {
  .nav {
    float: right;
    ul {
      width: 600px;
      height: 80px;
      line-height: 88px;
      margin: 0 auto;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      li {
        width: 100px;
        height: 80px;
        float: left;
        text-align: center;
        line-height: 80px;
        font-size: 18px;
        color: #000;
        cursor: pointer;
        // background: #d14e4e;
      }
      .nav_index {
        width: 100px;
        height: 80px;
        background-color: rgba(68, 142, 246, 1);
        color: #ffffff;
      }
    }
  }
}
</style>