feat(link): allow custom prop

vuejs · Apr 7, 2020 · 874510b · 874510b
1 parent bfaf1fa
commit 874510b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git 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
@@ -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
+          )
     }
   },
 })