Different behavior of .router-link-active class between v4 and v3

[lehni]

Version

4.1.6

Reproduction link

stackblitz.com: Vue 3 + Vue Router 4: Active & Exact Active Behavior

Steps to reproduce

First look at the same example for Vue 2 / Router 3:
stackblitz.com: Vue 2 + Vue Router 3: Active & Exact Active Behavior

There are three pages:

• One at /
• Two at /two
• Three at /two/three

So in terms of their routes, the pages are nested, but no children are used in their routes definitions.

Now note that .router-link-active is styled orange, and .router-link-exact-active is red and has precedence.

When you click from left to right through the three links, you will notice that the currently active one is red, while the ones the currently active page is nested inside, route-wise, appear as orange, as expected.

Now try the same example using Vue 3 / Router 4:

stackblitz.com: Vue 3 + Vue Router 4: Active & Exact Active Behavior

You will notice that the nesting is not taken into account anymore. .router-link-active is only given to the links that also receive .router-link-exact-active, and nothing ever appears orange.

What is expected?

The same behavior as in Vue 2 / Router 3

What is actually happening?

isActive appears to behave the same as isExactActive (at least in this example), and is thus rather useless…

[lehni]

I see this is the same as #1552, never mind.