fix(link): let vue merge attrs

Fix #846
vuejs · Mar 26, 2021 · 4142871 · 4142871
1 parent add6ce9
commit 4142871
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
@@ -800,6 +800,32 @@ describe('RouterLink', () => {
     expect(router.push).toHaveBeenCalledTimes(1)
   })
 
+  it('allows adding more click listeners', async () => {
+    const onClick = jest.fn()
+    const { router, wrapper } = await factory(
+      START_LOCATION_NORMALIZED,
+      { to: locations.basic.string, onClick },
+      locations.basic.normalized
+    )
+    wrapper.find('a')!.trigger('click')
+    expect(router.push).toHaveBeenCalledTimes(1)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('allows adding custom classes', async () => {
+    const { wrapper } = await factory(
+      locations.basic.normalized,
+      { to: locations.basic.string, class: 'custom class' },
+      locations.basic.normalized
+    )
+    expect(wrapper.find('a')!.classes()).toEqual([
+      'router-link-active',
+      'router-link-exact-active',
+      'custom',
+      'class',
+    ])
+  })
+
   it('calls router.replace when clicked with replace prop', async () => {
     const { router, wrapper } = await factory(
       START_LOCATION_NORMALIZED,

diff --git a/src/RouterLink.ts b/src/RouterLink.ts
@@ -16,7 +16,6 @@ import { RouteLocationRaw, VueUseOptions, RouteLocation } from './types'
 import { isSameRouteLocationParams, isSameRouteRecord } from './location'
 import { routerKey, routeLocationKey } from './injectionSymbols'
 import { RouteRecord } from './matcher/types'
-import { assign } from './utils'
 import { NavigationFailure } from './errors'
 
 export interface RouterLinkOptions {
@@ -145,7 +144,7 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
     },
   },
 
-  setup(props, { slots, attrs }) {
+  setup(props, { slots }) {
     const link = reactive(useLink(props))
     const { options } = inject(routerKey)!
 
@@ -192,19 +191,16 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
         ? children
         : h(
             'a',
-            assign(
-              {
-                'aria-current': link.isExactActive
-                  ? props.ariaCurrentValue
-                  : null,
-                onClick: link.navigate,
-                href: link.href,
-              },
-              attrs,
-              {
-                class: elClass.value,
-              }
-            ),
+            {
+              'aria-current': link.isExactActive
+                ? props.ariaCurrentValue
+                : null,
+              href: link.href,
+              // this would override user added attrs but Vue will still add
+              // the listener so we end up triggering both
+              onClick: link.navigate,
+              class: elClass.value,
+            },
             children
           )
     }