如何在Vue Router与Vue组合式API中获取RouterLink锚点ID

要实现点击<RouterLink>时获取其id用于埋点分析，不需要依赖beforeRouteLeave（该守卫无法直接关联点击事件，且组合式API中无this访问权限），推荐以下两种直接有效的方案：

方案一：给RouterLink绑定点击事件直接获取 #

<RouterLink>最终会渲染为<a>标签，直接给它绑定click事件，通过事件对象的currentTarget属性获取绑定事件的元素本身（避免子元素触发时target指向子节点的问题）。

示例代码： #

<template>
  <RouterLink id="linkHome" to="/home" @click="trackLinkClick">home</RouterLink>
  <RouterLink id="linkLogo" to="/home" @click="trackLinkClick">
    <svg>.... </svg>
  </RouterLink>
</template>

<script setup>
import { RouterLink } from 'vue-router'

const trackLinkClick = (event) => {
  // currentTarget 始终指向绑定事件的 RouterLink 对应的DOM元素
  const linkId = event.currentTarget.id
  // 这里执行埋点逻辑，比如上报ID到分析平台
  console.log('点击的路由链接ID:', linkId)
}
</script>

方案二：全局指令批量处理（适合大量RouterLink场景） #

如果项目中有大量需要埋点的<RouterLink>，可以通过自定义全局指令统一绑定点击事件，再结合全局路由守卫上报。

步骤1：注册全局指令 #

在项目入口文件（如main.js）中注册指令：

import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import App from './App.vue'

const app = createApp(App)
const router = createRouter(/* 路由配置 */)

// 自定义埋点指令
app.directive('track-link', {
  mounted(el) {
    el.addEventListener('click', () => {
      // 将点击的链接ID临时存到全局变量
      window.__trackedLinkId = el.id
    })
  }
})

app.use(router).mount('#app')

步骤2：给RouterLink添加指令 #

<RouterLink id="linkHome" to="/home" v-track-link>home</RouterLink>
<RouterLink id="linkLogo" to="/home" v-track-link>
  <svg>.... </svg>
</RouterLink>

步骤3：全局路由守卫中上报 #

在路由配置文件中添加全局前置守卫：

router.beforeEach((to, from) => {
  const linkId = window.__trackedLinkId
  if (linkId) {
    // 执行埋点上报
    console.log('路由跳转来源链接ID:', linkId)
    // 上报后清空变量，避免残留
    window.__trackedLinkId = null
  }
})

关于beforeRouteLeave的说明 #

组合式API中使用onBeforeRouteLeave钩子时，确实无法访问this，且该钩子是在离开当前路由时触发，触发场景包括浏览器后退、代码跳转等，无法精准对应到点击<RouterLink>的操作，因此不适合用来获取点击的链接ID。

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