fix(link): not active when matched is empty

diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
index 0ab1087e429bae2f4a09b0a940feed28857741ee..e92b78b265c218fdea6a990b36dd58d33017a421 100644 (file)
--- a/__tests__/RouterLink.spec.ts
+++ b/__tests__/RouterLink.spec.ts
@@ -227,6 +227,20 @@ const locations: Record<
       name: undefined,
     },
   },
+  notFound: {
+    string: '/not-found',
+    normalized: {
+      fullPath: '/not-found',
+      path: '/not-found',
+      params: {},
+      meta: {},
+      query: {},
+      hash: '',
+      matched: [],
+      redirectedFrom: undefined,
+      name: undefined,
+    },
+  },
 }
 
 describe('RouterLink', () => {
@@ -333,6 +347,15 @@ describe('RouterLink', () => {
     expect(el.querySelector('a')!.className).toContain('nav-item')
   })
 
+  it('is not active on a non matched location', () => {
+    const { el } = factory(
+      locations.notFound.normalized,
+      { to: locations.basic.string },
+      locations.basic.normalized
+    )
+    expect(el.querySelector('a')!.className).toBe('')
+  })
+
   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 495f3e5a31fe7e472cacf837e610648c9cf55cd8..efe531212daf9d391827b6c23ffb9f7be16ae8f1 100644 (file)
--- a/src/components/Link.ts
+++ b/src/components/Link.ts
@@ -46,6 +46,7 @@ export function useLink(props: UseLinkOptions) {
   )
   const isExactActive = computed<boolean>(
     () =>
+      activeRecordIndex.value > -1 &&
       activeRecordIndex.value === currentRoute.value.matched.length - 1 &&
       isSameLocationObject(currentRoute.value.params, route.value.params)
   )