Router in history mode loses hash when updating query

[denjaland]

Version

3.0.6

Reproduction link

https://jsfiddle.net/wjy9Lvgf/

Steps to reproduce

VueJS Router is set up with mode = history.
Consider a route at /security

This page has multiple panes. To decide which pane should be visble, we use the hash to determine this.

Example:
/security#tfa opens the pane where the user can enable/disable two factor authentication
/security#audit opens the pane that has a datatable with the most recent security audits

The query params are mostly used to drive what data is shown.
For instance, the datatable at /security#audit has a table that can be filtered or sorted.
Whenever for instance a table column header is clicked, we set the sort query parameter as follows:

this.$router.push({query: Object.assign({}, this.$route.query, {'sort': sortkey})});

I was under the impression that this method would be intelligent enough ONLY to update the query parameters, and leave the other parts of the route intact (path, params, hash...)

Yet, when we navigate by pushing to the router, ONLY pushing the query, the hash is lost...

So on /security#audit, clicking on the table column 'created', we do
this.$router.push({query: Object.assign({}, this.$route.query, {'sort': 'created'}));

The expected result would be /security?sort=created#audit
-->this would keep the 'audit pane' active, and sort the contents in that table by created date.

However, the result is /security?sort=created

The has should not be lost in that action.

What is expected?

I would not expect the hash to be lost in this case, so the new route would be /security?sort=created#audit

What is actually happening?

The hash is lost; the new route is /security?sort=created

---

We obviously try and put all these parameters in the route so a user can copy/paste the url and send it to a collleague to link to the correct information.

[posva]

This is intended if you don't provide the query, it gets removed

[denjaland]

Hi,

I am providing the query. But the hash is being removed...
When you push to the router only parts query, the path doesn't get changed, which is great. but why is the hash being changed?

[posva]

Sorry, I meant the hash, not the query. Explicitly add the hash alongaide the query

…

On 4 Aug 2019, at 00:14, David Heremans ***@***.***> wrote: Hi, I am providing the query. But the hash is being removed... When you push to the router only parts query, the path doesn't get changed, which is great. but why is the hash being changed? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or mute the thread.

[denjaland]

But that means I'd have to do that on every single $router.go() call I make. Wouldn't it be more interesting that the router only updates whatever is passed along? I can understand that the hash is lost when you go to a new path or navigate to a named route, but in this case, I'm merely changing query parameters; the path is not being impacted, and I don't believe the hash should either; both the path and hash define on what page / where you are on the page.
The query parameters define the scope of data that is shown.

[posva]

Yes, we prefer the explicit way.if you need an implicit way I recommend you to create your own function instead. Eduardo San Martin Morote

…

On 4 Aug 2019, at 01:03, David Heremans ***@***.***> wrote: But that means I'd have to do that on every single $router.go() call I make. Wouldn't it be more interesting that the router only updates whatever is passed along? I can understand that the hash is lost when you go to a new path or navigate to a named route, but in this case, I'm merely changing query parameters; the path is not being impacted, and I don't believe the hash should either; both the path and hash define on what page / where you are on the page. The query parameters define the scope of data that is shown. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or mute the thread.