fix(routerlink): allow event handlers under strictTemplates (fix #2484) (#2548)

Co-authored-by: Eduardo San Martin Morote <[email protected]>

Author: hodimbokom

packages/router/src/RouterLink.ts

@@ -26,6 +26,7 @@ import {
   // @ts-ignore
   ComponentOptionsMixin,
   MaybeRef,
+  AnchorHTMLAttributes,
 } from 'vue'
 import { isSameRouteLocationParams, isSameRouteRecord } from './location'
 import { routerKey, routeLocationKey } from './injectionSymbols'
@@ -359,18 +360,34 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
  */
 export const RouterLink: _RouterLinkI = RouterLinkImpl as any
 
+/**
+ * @internal
+ */
+type _RouterLinkPropsTypedBase = AllowedComponentProps &
+  ComponentCustomProps &
+  VNodeProps &
+  RouterLinkProps
+
+/**
+ * @internal
+ */
+type RouterLinkPropsTyped<Custom extends boolean | undefined> =
+  Custom extends true
+    ? _RouterLinkPropsTypedBase & { custom: true }
+    : _RouterLinkPropsTypedBase & { custom?: false | undefined } & Omit<
+          AnchorHTMLAttributes,
+          'href'
+        >
+
 /**
  * Typed version of the `RouterLink` component. Its generic defaults to the typed router, so it can be inferred
  * automatically for JSX.
  *
  * @internal
  */
 export interface _RouterLinkI {
-  new (): {
-    $props: AllowedComponentProps &
-      ComponentCustomProps &
-      VNodeProps &
-      RouterLinkProps
+  new <Custom extends boolean | undefined = boolean | undefined>(): {
+    $props: RouterLinkPropsTyped<Custom>
 
     $slots: {
       default?: ({

packages/router/test-dts/components.test-d.tsx

@@ -27,6 +27,17 @@ describe('Components', () => {
     expectTypeOf<JSX.Element>(<RouterLink class="link" to="/foo" />)
     expectTypeOf<JSX.Element>(<RouterLink to={{ path: '/foo' }} />)
     expectTypeOf<JSX.Element>(<RouterLink to={{ path: '/foo' }} custom />)
+    // event handlers and anchor attrs are allowed when not custom
+    expectTypeOf<JSX.Element>(
+      <RouterLink to="/" onFocus={() => {}} onClick={() => {}} />
+    )
+    expectTypeOf<JSX.Element>(
+      <RouterLink to="/" target="_blank" rel="noopener" />
+    )
+    // @ts-expect-error: href is intentionally omitted
+    expectError(<RouterLink to="/" href="/bar" />)
+    // @ts-expect-error: onFocus should not be allowed with custom
+    expectError(<RouterLink to="/" custom onFocus={() => {}} />)
 
     // RouterView
     expectTypeOf<JSX.Element>(<RouterView class="view" />)