vuejs / router

🚦 The official router for Vue.js

Home Page:https://router.vuejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`isActive` is not set when routes use wildcards

hugoattal opened this issue · comments

Reproduction

https://jsfiddle.net/5mg7jhz3/

Steps to reproduce the bug

Click on Bar (/foo/bar link) which is under the /foo/:other(.*)* route.

There are only two routes:

[
  { path: '/', component: Home },
  { path: '/foo/:other(.*)*', component: Foo }
]

Expected behavior

Foo (/foo link) should have

- isActive: true
- isExactActive: false

Actual behavior

Foo (/foo link) have

- isActive: false
- isExactActive: false

Additional information

I thought it was #1552, but it's actually different, since it's the same route in the router.

According to https://router.vuejs.org/guide/migration/index.html#Removal-of-the-exact-prop-in-router-link-
Routes are now active based on the route records they represent
So I think it should be active 🤔

I can do a PR if that's okay.

After taking a look at the code, it seems like this is intended:
https://github.com/vuejs/router/blob/main/packages/router/src/RouterLink.ts

const isActive = computed<boolean>(
  () =>
    activeRecordIndex.value > -1 &&
    includesParams(currentRoute.params, route.value.params)
)

I thought it worked something like this:

const isActive = computed<boolean>(
  () =>
    activeRecordIndex.value > -1 &&
    activeRecordIndex.value === currentRoute.matched.length - 1
)

Is that's so, I suggest adding something like isLooseActive.

If you don't think it's useful, that's okay, thanks a lot for your hard work ❤️!

Hello!
Yes, this is intended and explained in the migration guide. You should be able to find more details in the RFC I wrote for this. It was decided that it wasn't needed to add this method because it's a one liner of path.startsWith(otherPath)