Vue router-link exact active class

Question

I have a 3 of menu tabs (i.e. router-links) that correspond to 3 different routes:

/        --> home
/users   --> users
/posts   --> posts

The first router-link going to / has the exact property applied, so it does not receive an active class when on /users or /posts. This works for most cases, however I am planning on allowing query parameters on the / route. For example:

/?ref=producthunt

In this case, the / router-link should still be active. However, given I have the exact property on it, it is not matching the url with the ref query parameter. Outside of adding additional logic to my component to test the route and flip classes, is there some feature of the router-link component I can use to solve this?

choasia choasia · Accepted Answer · 2017-08-20T05:18:00

If you want to use router-link to navigate to '/' with the ref query parameter, why not just set ref as a query property in router-link? It will still work with exact.

<router-link :to="{ path: '/', query: { ref: 'producthunt' } }" exact>home</router-link>

Check demo here.

Updated
If you are talking about vue-router's setting issues, I think url like http://example.com/?ref=producthunt will be automatically directed to the home component without any advanced configuration because there's no parameter like exact in its api (I tried in a vuejs2+webpack project built by vue-cli just now). If it wasn't directed to your home, I wonder if there's anything wrong in other places like server application's configuration.

Vue router-link exact active class

1 Answers