Vue-router: Link to default child is not highlighted when another child is active

[ghost]

Version

3.0.3

Reproduction link

https://jsfiddle.net/3svnktq2/1/

Steps to reproduce

The setup is that 'parent' is a menu item. When you go to that item, you are redirected to the child state with default parameters. Within that child state you can modify your parameters which should result in keeping the menu item highlighted.

1) Click on the parent link
-> Redirected to child state with type parameter 'type1' and parent is highlighted as active state
2) Click on 'go to child with type2'

What is expected?

You stay in the same child state with a different parameter, keeping the parent link highlighted as the active state.

What is actually happening?

'Parent' is no longer highlighted as the active state. It is only highlighted when the type parameter is 'type1'.

---

This happens since version 3.0.3 of vue-router. If you change the loaded version of vue-router to 3.0.2, the behaviour is as expected. More history on this issue: https://github.com/vuejs/vue-router/issues/2717.

[posva]

Despite the warning, you need to reference the parent route to get it highlighted.
<router-link :to="{name:'parent'}">/parent</router-link> (but link doesn't work) or use the link /parent which will make the link work correctly

[ghost]

Referencing the parent route (and adding a redirect to the empty child) also results in no highlight when going to the child with a different parameter (https://jsfiddle.net/a5doLpvh/).
So from version 3.0.3 referencing the parent route through name is not possible? I have to reference it through the link?

[posva]

if you used a named link, you are explicitly referencing the child, so it makes sense not to highlight the link if the child is not being displayed

[ghost]

In https://jsfiddle.net/a5doLpvh/ I am explicitly referencing the parent which has a redirect to its child. I would expect that the link stays highlighted for the same child state but with a different parameter.
Also according to the documentation found in https://router.vuejs.org/api/#exact, I would expect that any route which starts with /parent should make the 'parent' link active. Unless this is only the case with a reference to a path and not to a route name.

[posva]

I'm revisiting this. What happens is that the link points to a redirected url, so it's never active. Activating such behaviour needs a bit more thinking and is part of an RFC. If you have any input for that, it will be highly appreciated once the RFC is out :)

This is a working version with no redirect: https://jsfiddle.net/o59bxs3m/
You could do the redirect manually in the created hook or the beforeEnter guard

[Alcoine]

Same happening to me. Working correctly with ver 3.0.1.

[posva]

I'm marking this as a bug, the child should be indeed marked as active, whether there is a redirect or not. Playground for myself or anybody who wants to give this issue a shot: https://jsfiddle.net/posva/fj7ywzxv/

[maxim-usikov]

@posva Same for parent redirect, i guess: https://codesandbox.io/s/github/maxim-usikov/vue-router-issue-2724

[posva]

@maxim-usikov the redirect should go on a child (see #2717). A route record with both component and redirect is not allowed because redirect means that the route is never reached, therefore its component is never reached. For routes with children, because we are redirecting to a child route, it can work, but the right declaration of the redirect will be on an empty child { path: '', redirect: {...} }

FYI the fix hasn't been released yet

[maxim-usikov]

@posva ahhh, thank you for explanation.