如何在Vue3的router-link路由激活时添加自定义属性？

方法一：使用router-link作用域插槽（推荐） #

Vue3的router-link提供了作用域插槽，可以直接获取路由的激活状态（isActive/isExactActive），无需额外逻辑即可绑定aria-selected：

<!-- 渲染标签页 -->
<ul>
  <li>
    <router-link :to="{ name: 'tab1' }" v-slot="{ isActive }">
      <a :aria-selected="isActive">Tab1</a>
    </router-link>
  </li>
  <li>
    <router-link :to="{ name: 'tab2' }" v-slot="{ isActive }">
      <a :aria-selected="isActive">Tab2</a>
    </router-link>
  </li>
</ul>

• isActive：当前路由与目标路由匹配时返回true（包含子路由匹配）
• 如果需要精确匹配（仅当路由完全一致时激活），替换为isExactActive即可。

方法二：自定义判断逻辑结合useRoute #

若不想使用插槽，可通过useRoute获取当前路由，编写判断函数来控制aria-selected：

<script setup>
import { useRoute } from 'vue-router'
const currentRoute = useRoute()

// 自定义路由匹配判断
const isTabActive = (targetRouteName) => {
  return currentRoute.name === targetRouteName
}
</script>

<template>
  <!-- 渲染标签页 -->
  <ul>
    <li>
      <router-link :to="{ name: 'tab1' }" :aria-selected="isTabActive('tab1')">
        Tab1
      </router-link>
    </li>
    <li>
      <router-link :to="{ name: 'tab2' }" :aria-selected="isTabActive('tab2')">
        Tab2
      </router-link>
    </li>
  </ul>
</template>

• 可根据需求调整匹配逻辑，比如通过currentRoute.path判断路径是否包含指定值。

注意事项 #

• aria-selected需要布尔值，Vue会自动将true/false转换为符合ARIA规范的字符串值；
• 若需保留router-link的默认行为（如导航拦截），插槽内的<a>标签无需额外添加点击事件。

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