feat(link): activeClass and exactActiveClass props

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 17744633dc3fbd43a9df03d246efdea3de4b8e34..fdb0c391f4e357c8276ba76ea22fe54d4db90e65 100644 (file)
--- a/__tests__/RouterLink.spec.ts
+++ b/__tests__/RouterLink.spec.ts
@@ -220,7 +220,7 @@ describe('RouterLink', () => {
     currentLocation: RouteLocationNormalized,
     propsData: any,
     resolvedLocation: RouteLocation,
-    template: string = `<RouterLink :to="to">a link</RouterLink>`
+    template: string = `<RouterLink v-bind="propsData">a link</RouterLink>`
   ) {
     const router = {
       history: createMemoryHistory(),
@@ -238,7 +238,7 @@ describe('RouterLink', () => {
       template,
       components: { RouterLink } as any,
       setup() {
-        return { to: propsData.to }
+        return { propsData }
       },
     })
 
@@ -286,12 +286,34 @@ describe('RouterLink', () => {
     expect(el.querySelector('a')!.className).toContain('router-link-active')
   })
 
+  it('can customize active class', () => {
+    const { el } = factory(
+      locations.basic.normalized,
+      { to: locations.basic.string, activeClass: 'is-active' },
+      locations.basic.normalized
+    )
+    expect(el.querySelector('a')!.className).not.toContain('router-link-active')
+    expect(el.querySelector('a')!.className).toContain('is-active')
+  })
+
+  it('can customize exact active class', () => {
+    const { el } = factory(
+      locations.basic.normalized,
+      { to: locations.basic.string, exactActiveClass: 'is-active' },
+      locations.basic.normalized
+    )
+    expect(el.querySelector('a')!.className).not.toContain(
+      'router-link-exact-active'
+    )
+    expect(el.querySelector('a')!.className).toContain('is-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>`
+      `<RouterLink class="nav-item" :to="propsData.to">a link</RouterLink>`
     )
     expect(el.querySelector('a')!.className).toContain('router-link-active')
     expect(el.querySelector('a')!.className).toContain('nav-item')

diff --git a/src/components/Link.ts b/src/components/Link.ts
index 89dc854d3fa681adc2f4fa2fe240f7ac1a2975e4..30e9649e25758ef31fd1bccee54c199a72941cbc 100644 (file)
--- a/src/components/Link.ts
+++ b/src/components/Link.ts
@@ -72,14 +72,22 @@ export const Link = defineComponent({
       type: [String, Object] as PropType<RouteLocationRaw>,
       required: true,
     },
+    activeClass: {
+      type: String,
+      default: 'router-link-active',
+    },
+    exactActiveClass: {
+      type: String,
+      default: 'router-link-exact-active',
+    },
   },
 
   setup(props, { slots, attrs }) {
     const link = reactive(useLink(props))
 
     const elClass = computed(() => ({
-      'router-link-active': link.isActive,
-      'router-link-exact-active': link.isExactActive,
+      [props.activeClass]: link.isActive,
+      [props.exactActiveClass]: link.isExactActive,
     }))
 
     return () => {