Nuxt项目中nuxt-link激活或悬停时如何切换导航栏图标

前置错误修复 #

先把你原有代码里的两个问题修掉，不然代码无法正常运行：

• 第二个导航项的title属性漏了前引号，属于语法错误
• 原有字段命名和注释对应关系混乱，我直接把字段重命名为语义化的activeIcon（激活/悬停显示的icon-1）、inactiveIcon（未激活显示的icon-2），避免后续逻辑写反

修正后的脚本代码：

data() {
  return {
    navLinks: [
      { 
        title: 'Link 1', 
        path: '/' , 
        activeIcon: './Icons/home-icon-1.svg',
        inactiveIcon: './Icons/home-icon-2.svg'
      },
      { 
        title: 'Link 2', 
        path: '/about' , 
        activeIcon: './Icons/about-icon-1.svg',
        inactiveIcon: './Icons/about-icon-2.svg'
      },
      { 
        title: 'Link 3', 
        path: '/contact' , 
        activeIcon: './Icons/contact-icon-1.svg',
        inactiveIcon: './Icons/contact-icon-2.svg'
      }
    ]
  }
}

模板调整 #

不需要额外写JS监听鼠标事件、也不需要手动判断当前路由，nuxt-link组件在匹配到当前路由时会自动添加状态类，靠CSS就能实现状态切换，性能更好没有额外开销：

<ul>
  <li class="nav-list-item" v-for="(link, i) in navLinks" :key="i">
    <nuxt-link :to="link.path" class="nav-link">
      <img :src="link.activeIcon" class="icon icon-active" alt="">
      <img :src="link.inactiveIcon" class="icon icon-inactive" alt="">
      <span class="nav-title">{{link.title}}</span>
    </nuxt-link>
  </li>
</ul>

样式控制 #

给图标加基础样式统一尺寸，避免切换时布局抖动，再根据链接状态控制图标显隐：

/* 图标基础样式，宽高按你的实际设计稿调整 */
.nav-link .icon {
  width: 20px;
  height: 20px;
  display: none;
}
/*  默认未激活状态，显示未激活图标 */
.nav-link .icon-inactive {
  display: block;
}
/* 鼠标悬停、路由激活时，隐藏未激活图标，显示激活图标 */
.nav-link:hover .icon-inactive,
/* Nuxt2 用nuxt-link-exact-active做路由精准匹配，避免首页链接在所有子路由下都被判定为激活
如果需要非精准匹配，替换为nuxt-link-active即可；Nuxt3环境替换为router-link-exact-active */
.nav-link.nuxt-link-exact-active .icon-inactive {
  display: none;
}
.nav-link:hover .icon-active,
.nav-link.nuxt-link-exact-active .icon-active {
  display: block;
}

提示：如果你的项目是Nuxt3，且发现激活类名不生效，把代码里的nuxt-link-exact-active替换为router-link-exact-active即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者user15136777