feat(link): allow `custom` prop

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 558a6f0765bb2f344bc0fb4913c19ce52e338abf..0ab1087e429bae2f4a09b0a940feed28857741ee 100644 (file)
--- a/__tests__/RouterLink.spec.ts
+++ b/__tests__/RouterLink.spec.ts
@@ -576,5 +576,26 @@ describe('RouterLink', () => {
 
       expect(el.innerHTML).toMatchSnapshot()
     })
+
+    it('renders an anchor by default', () => {
+      const { el } = factory(
+        locations.basic.normalized,
+        { to: locations.basic.string },
+        locations.basic.normalized
+      )
+
+      expect(el.children[0].tagName).toBe('A')
+      expect(el.children).toHaveLength(1)
+    })
+
+    it('can customize the rendering and remove the wrapping `a`', () => {
+      const { el } = factory(
+        locations.basic.normalized,
+        { to: locations.basic.string, custom: true },
+        locations.basic.normalized
+      )
+
+      expect(el.innerHTML).not.toContain('</a>')
+    })
   })
 })

diff --git a/src/components/Link.ts b/src/components/Link.ts
index 30e9649e25758ef31fd1bccee54c199a72941cbc..a487bc47b6abe367d5fc428c9decdeae3a141ff4 100644 (file)
--- a/src/components/Link.ts
+++ b/src/components/Link.ts
@@ -80,6 +80,7 @@ export const Link = defineComponent({
       type: String,
       default: 'router-link-exact-active',
     },
+    custom: Boolean,
   },
 
   setup(props, { slots, attrs }) {
@@ -91,17 +92,20 @@ export const Link = defineComponent({
     }))
 
     return () => {
-      return h(
-        'a',
-        {
-          'aria-current': link.isExactActive ? 'page' : null,
-          onClick: link.navigate,
-          href: link.href,
-          ...attrs,
-          class: elClass.value,
-        },
-        slots.default && slots.default(link)
-      )
+      const children = slots.default && slots.default(link)
+      return props.custom
+        ? children
+        : h(
+            'a',
+            {
+              'aria-current': link.isExactActive ? 'page' : null,
+              onClick: link.navigate,
+              href: link.href,
+              ...attrs,
+              class: elClass.value,
+            },
+            children
+          )
     }
   },
 })