Nuxt中nuxt-link的@click事件无法触发修改isActive值问题

• 模板内@click绑定的执行语句语法错误：多个方法调用直接用空格分隔不符合Vue内联表达式语法，会导致点击事件逻辑完全不执行，自然无法修改isActive的值。
• 状态设计逻辑错误：用单个全局布尔值isActive控制所有循环生成的板块项样式，即使点击逻辑正常，也无法精准匹配当前激活的单个板块，会出现所有项同时切换下划线的问题。
• 存在冗余逻辑：nuxt-link配置了:to属性后会自动处理路由跳转，不需要额外在方法里调用this.$router.push重复触发跳转，反而可能引发组件状态异常。

nuxt-link原生支持当前路由匹配状态的自动标记，不需要额外写点击事件、维护高亮状态，是实现导航高亮的最优方案：

<!-- 板块列表遍历项，v-for绑定你自己的板块列表数据源 -->
<nuxt-link
  v-for="filterItem in filterList"
  :key="filterItem.filter"
  :to="`${path}/${filterItem.filter}`"
  class="section-item"
>
  <!-- 替换为你自己的板块名称字段 -->
  {{ filterItem.label }}
</nuxt-link>

直接写对应样式即可，匹配当前路由的nuxt-link会自动带上nuxt-link-active类名：

.section-item {
  text-decoration: none;
}
/* 匹配当前路由的板块自动加下划线 */
.section-item.nuxt-link-active {
  text-decoration: underline;
}

如果需要自定义激活类名，给nuxt-link添加active-class属性即可，例如:active-class="'current-section'"，对应编写该类的样式。

如果有特殊业务场景需要自行控制高亮状态，按如下方式修改：

1. 将单个布尔值isActive替换为存储当前激活板块标识的变量，精准匹配对应项
2. 修正内联事件写法，删除冗余的路由跳转逻辑
3. 添加路由监听/初始化逻辑，保证页面刷新、直接地址栏访问时高亮状态正确

模板部分：

<nuxt-link
  v-for="filterItem in filterList"
  :key="filterItem.filter"
  :to="`${path}/${filterItem.filter}`"
  :style='{"text-decoration": (activeFilter === filterItem.filter ? "underline" : "none")}'
  @click="activeFilter = filterItem.filter"
>
  {{ filterItem.label }}
</nuxt-link>

JS部分：

data() {
  return {
    // 你原本的其他变量：path、filterList等
    activeFilter: ''
  }
},
mounted() {
  // 初始化时读取当前路由参数，匹配初始高亮项
  this.activeFilter = this.$route.params.filter
},
watch: {
  // 监听路由参数变化，路由跳转时自动更新高亮
  '$route.params.filter'(newFilter) {
    this.activeFilter = newFilter
  }
}
// 原有的selectSeason、toggleUnderline方法可直接删除

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