Description
What problem does this feature solve?
Use case
I have a nested view of pages that looks like this:
Foo (links to /pages/foo)
|-- Bar (links to /pages/foo/bar)
I need to highlight the current selected page (and only 1 item can be highlighted). So if the user is on /pages/foo, only Foo should be highlighted. If the user is on /pages/foo/bar, only Bar should be highlighted. However, this page also has pagination that when selecting the 2nd page, navigates to /pages/foo/bar?page=2.
Context
vue-router currently has the option to do an exact match of the path upon which the router will automatically add the class specified in the linkExactActiveClass option (which is router-link-exact-active by default).
In the above example, the exact match will match /pages/foo/bar but will not match /pages/foo/bar?page=2 since it includes the query params in the comparison. However, if I don't use the exact match then both Foo and Bar will be both shown as active.
My solution has been to add a custom check to match only the path but would be nice for vue-router to have the option by default.
This request is for the ability to do an exact match but only on the path, not the whole URL, i.e. the exactPath match will ignore any query params in the URL.
What does the proposed API look like?
The current implementation of exact uses the exact directive to add the router-link-exact-active class.
A proposed solution would be to add the exact-path directive which will in term add the router-link-exact-path-active class.