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 ponent to test the route and flip classes, is there some feature of the router-link ponent I can use to solve this?

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 ponent to test the route and flip classes, is there some feature of the router-link ponent I can use to solve this?

• javascript
• vue.js
• vuejs2
• vue-router

1 Answer 1

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./?ref=producthunt will be automatically directed to the home ponent 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.