feat(vue): Set navigation.route.id from the route name (#22372)

Sets the `navigation.route.id` attribute on pageload and navigation
spans, sourced from the Vue Router route name (`to.name`).

ref #22069

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: msonnb

dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts

@@ -120,6 +120,7 @@ test('sends a pageload transaction with a route name as transaction name if avai
           'sentry.source': 'custom',
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
+          'navigation.route.id': 'AboutView',
           'url.path': '/about',
           'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/about$/),
         },

packages/vue/src/router.ts

@@ -1,5 +1,10 @@
 import { captureException, getAbsoluteUrl } from '@sentry/browser';
-import { PARAMS_KEY_BASE, URL_PATH_PARAMETER_KEY_BASE, URL_TEMPLATE } from '@sentry/conventions/attributes';
+import {
+  NAVIGATION_ROUTE_ID,
+  PARAMS_KEY_BASE,
+  URL_PATH_PARAMETER_KEY_BASE,
+  URL_TEMPLATE,
+} from '@sentry/conventions/attributes';
 import type { Span, SpanAttributes, StartSpanOptions, TransactionSource } from '@sentry/core';
 import {
   getActiveSpan,
@@ -101,6 +106,10 @@ export function instrumentVueRouter(
       attributes[URL_TEMPLATE] = spanName;
     }
 
+    if (to.name) {
+      attributes[NAVIGATION_ROUTE_ID] = to.name.toString();
+    }
+
     getCurrentScope().setTransactionName(spanName);
 
     // Update the existing page load span with parametrized route information

packages/vue/test/router.test.ts

@@ -2,7 +2,7 @@ import * as SentryBrowser from '@sentry/browser';
 import type { Span, SpanAttributes } from '@sentry/core';
 import * as SentryCore from '@sentry/core';
 import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
-import { URL_TEMPLATE } from '@sentry/conventions/attributes';
+import { NAVIGATION_ROUTE_ID, URL_TEMPLATE } from '@sentry/conventions/attributes';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import type { Route } from '../src/router';
 import { instrumentVueRouter } from '../src/router';
@@ -465,5 +465,9 @@ function getAttributesForRoute(route: Route, urlTemplate?: string): SpanAttribut
     attributes[URL_TEMPLATE] = urlTemplate;
   }
 
+  if (route.name) {
+    attributes[NAVIGATION_ROUTE_ID] = route.name.toString();
+  }
+
   return attributes;
 }