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

Fix #133

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 24c5f230416fa98bec01d48913569d7014be37e6..4fe72040d9cee9464f9d0b184e365df599440a68 100644 (file)
--- 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 343403e71e09da11f92cdd29d65dea9d98de44ea..157e6084ed4b5204fd9e46fb86f48ccc43c7dd73 100644 (file)
--- 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)
       )