[next] active router-link with query

[inca]

When :to="{ name: 'xyz', query: {} }" form is used, active class is not set correctly. Debugging revealed that :exact="true" links also compare hash with strict equality, so I was able to get this stuff working by including hash: "", which is obviously not what one would ever expect ;)

Example: https://jsfiddle.net/borisokunskiy/yjm90k1j/1/

To repro just click through various links and observe classes set correctly only on "Exact links with hash="":" group.

That being said, I believe that non-exact links being active regardless of query value is not expected either, but I wonder if that's by design.

[fnlctrl]

As for your first question, I've just submitted a PR for a fix: #636

As for non-exact links' behavior, it is documented here

the default matching behavior is inclusive match. For example, an element with v-link="/a" will get this class applied as long as the current path starts with /a.

Since it's inclusive match, it should be expected that /a will be active for whatever path like /a?foo&bar#qux

[inca]

Thanks for the PR!

re: inclusive match, yep, it's surely expected, but /foo?answer=42 isn't quite expected to be active for /foo?answer=43, even with non-exact links.

[fnlctrl]

@inca I see.... I'll try fixing it

[fnlctrl]

@inca non-exact match only cares about equality of query keys (answer in this case)
https://github.com/vuejs/vue-router/blob/next/src/util/route.js#L42-L43

So it'll be a breaking change.. Needs discussion
@posva @LinusBorg @yyx990803

[posva]

I'm still unsure about the usage of exact. However /foo?answer=6 and /foo?answer=8 are the same route. That's the difference between query parameters and route parametres

[inca]

What's the practical scenario of link /items?page=1 being active when URL is /items?page=2? I do understand highlighting when subset of keys matches (e.g. non-exact link /items?page=1 can be active for /items?page=1&sort=title), but I can't come up with any real situation where I would want it to only match query keys.

[posva]

@inca I was thinking about search?q=query. However, the browser does make the difference when applying the active style. Therefore I think we should stick to how the browsers behave and apply active class when query parameters and values also match (as you proposed).

[inca]

Pretty close to what I had in mind: since we're only talking about links then I assume it's more of a category-like search — so I'd expect the link ?q=query to be active when q actually has value query, not when it exists. This logic goes in line with "principle of least surprise", at least for me :)

That being said, it's not possible to solve every problem with a boolean flag, so in case the change is breaking and requires consideration, I'm happy to leave stuff as it is (there are other ways to add class to link ;) ).

[posva]

imo queries should be used to match routes because that's how it works on browsers too