Vue导航激活设置-

1.有一个导航栏，点击之后设置相应的激活类：

<ul class="app-header-nav">
    <li v-for="item in navList" :key="item.id" >
        <RouterLink active-class="active" :to="`/nav/${item}`">
            {{ item.name }}
        </RouterLink>
    </li>
</ul>

// 激活类
.active {
    color: blue,
    border-bottom: 1px solid blue
}

2. 如果是下面这种情况，就会出现问题，这里“首页”和v-for里面点击的某个item都会显示激活类的效果，显然是不可取的。

<ul class="app-header-nav">
    <li class="home">
        <RouterLink active-class="active" to="/">首页</RouterLink>
    </li>
    <li v-for="item in navList" :key="item.id" >
        <RouterLink active-class="active" :to="`/nav/${item}`">
            {{ item.name }}
        </RouterLink>
    </li>
</ul>

// 激活类
.active {
    color: blue,
    border-bottom: 1px solid blue
}

3.如何解决上面的问题？

• 方法一（简单有效）：将 active-class 换成精确匹配 exact-active-class，在这种情况下，只有精确匹配的路由才会应用指定的类。这意味着根路径 / 只有在完全匹配时才会被标记为活动状态。如下：

  <ul class="app-header-nav">
      <li class="home">
          // 替换这个就好
          <RouterLink exact-active-class="active" to="/">首页</RouterLink>
      </li>
      <li v-for="item in navList" :key="item.id" >
          <RouterLink active-class="active" :to="`/nav/${item}`">
              {{ item.name }}
          </RouterLink>
      </li>
  </ul>
  

• 方法二：动态添加和移除类，使用 Vue 的动态类绑定来控制类的添加和移除，确保只有一个类被应用。如下：

  <template>
    <ul>
      <li class="home">
        <RouterLink :class="{'active': isActive('/')}" to="/">首页</RouterLink>
      </li>
      <li v-for="item in navList" :key="item.id">
        <RouterLink :class="{'active': isActive(`/nav/item`)}" :to="`/nav/item`">
          {{ item.name }}
        </RouterLink>
      </li>
    </ul>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useRoute, RouterLink } from 'vue-router';
  
  const route = useRoute();
  const navList = [....]
  
  const isActive = (path: string) => {
    return route.path === path;
  };
  </script>
  
  <style>
  .active {
    .....
  }
  </style>
  

• 方法三：“首页”和navList做一个拼接，放在一起就好了。