From: wietseva <wietseva@users.noreply.github.com>
Date: Thu, 12 Mar 2020 11:24:38 +0000 (+0100)
Subject: fix(link): allow custom classes (#134)
X-Git-Tag: v4.0.0-alpha.2~14
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=392c295552e5b7dbe1d494c1c3168571e3339153;p=thirdparty%2Fvuejs%2Frouter.git

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

Fix #133
---

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 24c5f230..4fe72040 100644
--- 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
index 343403e7..157e6084 100644
--- 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)
       )