Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Child state with different parameters is not correctly highlighted as active state #2717

Closed
frednijs opened this Issue Apr 15, 2019 · 3 comments

Comments

Projects
None yet
3 participants
@frednijs
Copy link

frednijs commented Apr 15, 2019

Version

3.0.3

Reproduction link

https://jsfiddle.net/u6f03y45/3/

Steps to reproduce

  1. Click on child 1.
    -> Parent link and child 1 link are highlighted as the active state.
  2. Click on child 2

What is expected?

Parent link and child 2 link are highlighted as the active state

What is actually happening?

Parent is not highlighted as the active state


This bug 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.

@frednijs frednijs changed the title Child state with different parameters is not correctly highlighted Child state with different parameters is not correctly highlighted as active state Apr 15, 2019

@oscargglez

This comment has been minimized.

Copy link

oscargglez commented Apr 15, 2019

Same problem.. After update from 3.0.1 to 3.0.4 this behaviour has appear...

@posva

This comment has been minimized.

Copy link
Member

posva commented Apr 15, 2019

This is working as expected: having a redirect with a component option doesn't make sense as it would never be used. Use a child with path: '' to do the redirect instead, and make sure to provide a valid parent component:

https://jsfiddle.net/6k831rj0/

@posva posva closed this Apr 15, 2019

@frednijs

This comment has been minimized.

Copy link
Author

frednijs commented Apr 16, 2019

Hi,
I get your point but there is still something wrong. I modified your fiddle: https://jsfiddle.net/3svnktq2/1/
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.
As you can see in the fiddle if you click on the parent link, you are redirected to the child state with the type param 'type1' and parent is highlighted as expected. However if you go to the same child state with a different type parameter, 'parent' is no longer highlighted as the active state which is not as expected. If you change the vue-router version back to 3.0.2, it works as expected.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.