Vue-router: Can we expose active route matching logic as a public utility?

[corsen2000]

We are using a 3rd party icon component to build a navigation bar for our application. The icon component supports a property selected that when set to true will highlight the icon. We would like to set this property to be true, under the same conditions that vue-router uses internally when determining whether or not to add .router-link-active.

The logic that I would like to use can be seen in the source code here.

A utility function such as isCurrentRouteActive(exact?) would help us out. We could use that to invoke the same logic that vue-router uses internally and pass the result to the 3rd party icon component.

As a workaround we are currently using:

const isActive = this.$route.name === this.nameOption;

But, this will fail for us when either:

1. There is a unnamed route in the system
2. There are nested routes in the system (as we essentially want exact = false)

Thank you for your time.

[totomakers]

Up \o/

It's can be usefull since "v-link-active" is out and document structure doesn't provide syntax for vue router (active class out of li tag) :

<router-link> <!-- Class active need here -->
  <a>
  <span></span>  <!-- Class active need also here --> 
</router-link>

[posva]

@corsen2000 Revisiting the issue. Isn't the matched array what you were looking for? https://router.vuejs.org/en/api/route-object.html

It allows you to perform custom matches between routes

[corsen2000]

@posva I think the matched array may be useful in general for this, but unfortunately it can not help my use case. I am using Nuxt.js which does not generate nested routes. For example the router generated looks something like this, when using logically nested routes.

{
  path: "/about",
  component: _42eecee8,
  name: "about"
},
{
  path: "/about/location",
  component: _fab57be6,
  name: "about-location"
},

Because of this my matched away will only ever contain a single route.

If this what not the case and it used nested routes in the router configuration, I could iterate over each of the matches looking for the route that my link refers to and I think it would be helpful. Although I think that would help a couple concerns remain.

1. It's still may not the exact same logic being used for .router-link-active. I think it would be nice since this feature exists to execute the identical logic in a more flexible way.
2. Though easier it's more work than a simple function call,

That said, I am unsure that I would have filed this issue in the first place if Nuxt generated nested routes and I knew about the matchedtechnique. I'll consider following up with Nuxt about the route generation.

A few others are active on this issue. Maybe they can comment on whether or not the matched strategy is suitable for them. I unfortunately can't test it fully in my application due to the above Nuxt issue.

[djsmedes]

How would using $route.matched work as a workaround for this? Something like this?

function isActive(toRoute) {
  for (let match in $route.matched) {
    if (toRoute.path === match.path) {
      return true;
    }
  return false;
}

What would the downsides of using the $route.matched technique be - would there be false positives? False negatives? Issues with params?

[pedzed]

As a workaround we are currently using:

const isActive = this.$route.name === this.nameOption;

Where do you put this and how do you check it in Vue/HTML?

I'm using Nuxt for the first time and have big difficulties finding some problems I am facing.

[posva]

This is now doable with the v-slot api exposed by router-link