fix(link): allow custom classes (#134)

Fix #133
vuejs · Mar 12, 2020 · 392c295 · 392c295
1 parent 1adf36b
commit 392c295
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
@@ -105,7 +105,8 @@ describe('RouterLink', () => {
   function factory(
     currentLocation: RouteLocationNormalized,
     propsData: any,
-    resolvedLocation: RouteLocationNormalized
+    resolvedLocation: RouteLocationNormalized,
+    template: string = `<RouterLink :to="to">a link</RouterLink>`
   ) {
     const router = {
       history: createMemoryHistory(),
@@ -120,7 +121,7 @@ describe('RouterLink', () => {
 
     router.resolve.mockReturnValueOnce(resolvedLocation)
     const { app, el } = mount(router as any, {
-      template: `<RouterLink :to="to">a link</RouterLink>`,
+      template,
       components: { RouterLink } as any,
       setup() {
         return { to: propsData.to }
@@ -171,6 +172,17 @@ describe('RouterLink', () => {
     expect(el.querySelector('a')!.className).toContain('router-link-active')
   })
 
+  it('can be active with custom class', () => {
+    const { el } = factory(
+      locations.basic.normalized,
+      { to: locations.basic.string },
+      locations.basic.normalized,
+      `<RouterLink class="nav-item" :to="to">a link</RouterLink>`
+    )
+    expect(el.querySelector('a')!.className).toContain('router-link-active')
+    expect(el.querySelector('a')!.className).toContain('nav-item')
+  })
+
   it('is not active with more repeated params', () => {
     const { el } = factory(
       locations.repeatedParams2.normalized,

diff --git a/src/components/Link.ts b/src/components/Link.ts
@@ -87,10 +87,10 @@ export const Link = defineComponent({
       return h(
         'a',
         {
+          ...attrs,
           class: elClass.value,
           onClick: link.navigate,
           href: link.href,
-          ...attrs,
         },
         slots.default && slots.default(link)
       )