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

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'
@@ -365,12 +366,20 @@ export const RouterLink: _RouterLinkI = RouterLinkImpl as any
  *
  * @internal
  */
+type LinkAnchorAttrs = Omit<AnchorHTMLAttributes, 'href'>
+
+type _BaseRouterLinkProps = AllowedComponentProps &
+  ComponentCustomProps &
+  VNodeProps &
+  RouterLinkProps
+
+type RouterLinkTypedProps<C extends boolean | undefined> = C extends true
+  ? _BaseRouterLinkProps & { custom: true }
+  : _BaseRouterLinkProps & { custom?: false | undefined } & LinkAnchorAttrs
+
 export interface _RouterLinkI {
-  new (): {
-    $props: AllowedComponentProps &
-      ComponentCustomProps &
-      VNodeProps &
-      RouterLinkProps
+  new <C extends boolean | undefined = boolean | undefined>(): {
+    $props: RouterLinkTypedProps<C>
 
     $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" />)