fix(link): not active when matched is empty

vuejs · Apr 8, 2020 · acd644d · acd644d
1 parent dfa4f13
commit acd644d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git 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
@@ -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)
   )