Option to match exactPath that ignores query parameters and/or hashes

[zamakkat]

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.

[throrin19]

any news about that ? I have the same problem here

[posva]

The api around adding active classes is starting to get bloated so I will take more time to think about this and proposals are welcome too

For the moment, adding a name to the route and comparing the name with current route is the workaround: :class="$route.name === 'some-name' && 'router-link-active'"

[posva]

The RFC is up at vuejs/rfcs#35

[posva]

I created a new RFC, way simpler that eliminates the problem by design, but is also a breaking change: vuejs/rfcs#136

I would appreciate some feedback!

[posva]

Now that vuejs/rfcs#136 is merged and implemented on v4, we can add a workaround for v3:

A prop named exact-path for RouterLink that will exactly match the path section of the route. This means, exact-path implies exact and that exact is redundant when exact-path is present. I think this makes more sense because in v4, the active behavior looks more like exact but without query and hash matching. That being said, exact-path is not the same as exact matching in v4 (which implies matching aliases and taking into account route nesting), which requires much more work and makes more sense to appear in a major release instead.
That being said, it's worth noting how flexible the v-slot API is, allowing us to create our own version of RouterLink, tailored to each project. E.g., here is an example of reproducing exact-path using v-slot in a custom CustomLink.vue:

<template>
  <router-link :to="link" v-slot="{ route, href, navigate }">
    <a
      :href="href"
      @click="navigate"
      :class="route.path === $route.path ? 'router-link-active' : ''"
      :aria-current="route.path === $route.path && 'page'"
      ><slot></slot
    ></a>
  </router-link>
<template>

More info about the v-slot API: https://router.vuejs.org/api/#v-slot-api-3-1-0

Let me know what you think about this, specifically about the exact-path I proposed so I can implement it.

[re2005]

I still having issues with 'router-link-exact-active' when dealing with child route and having a query parameter.

Does anyone have founded a solution for that ?

Thanks

[Sonit90]

This bug still persists in Vue router 4.0.11

[productdevbook]

cc: @posva some problem 4.0.12

[nick-shaydayuk]

still having issue with "exact". in App component i try to make a paginated fullpage scroll and problem is about vue router: all links are active at the same time, no matter about hash anchors, so maybe anyone have a solution? PS sorry for my english :)