How to properly link pagination with vue-router?

Question

Vue.js

Hello!
The component has a paginator that generates a change event, which is caught by a function that changes the current page number, loads data from the server, and updates some table with data.
it is necessary to reflect the page number in the url: /data?page=1
How to do it correctly, I have two options:
1. Make the paginator immediately jump using the link

<router-link :to='`/data?page=${currentPage+1}`'>след.</router-link>

in the component, catch the this.$route change and start loading and updating data
2. in the page change processing function, somehow change the browser url (if at all possible, then how?).
How is it better?
And the second question on the same topic: suppose I have some set of filter parameters in the component (10-20 pieces), is there any existing method / function that can (easily and simply) build a route based on these parameters ( url to go) and vice versa.
So far I can't think of anything other than this:

let url = `/data?page=${val}&pagesize=${ps}&categoryid=${catid}`;

and

if (this.$route.query["page"]) filters.page = Number(this.$route.query["page"]);

Thank you!

Answer 1

In the course of various experiments, I came to this conclusion:
If we want to make a page (component | view) so that the following conditions are met:
- the component has parameters that affect its display (for example, the page number of the list and / or filters)
- we want these parameters were reflected in the url and it was possible to save the link to the component in such a way
- so that when the page was opened via the link, the appearance of the component was restored.
- if we go forward / backward in the browser, then the state corresponding to the browser history is restored.
Then we should write the component like this:
1. All the parameters that we want to have in the url must be changed through routing using the "router-link" element, or the "to" attributes of some elements, or using this.$routes.push. In this case, the link must be such that all parameters, except for the one being changed, are the same.
For example, we have a page number, page size, and category that must be in the url so that the user can forward a link to a specific page of a specific category. Thus, paginator links should look like:
/goods?page=1&ps=20&catid=10, /goods?page=2&ps=20&catid=10, /goods?page=3&ps=20&catid=10
accordingly, if we have 50 parameters that we must reflect, then we will need to organize transition addresses for 50 parameters, and for all components that change these parameters, for this, we probably need to write some kind of bicycle that takes the current url parameters, changes (or adds) one of them to them and generates a new transition address.
2. you need to write an initialization method in the component, which, using the parameters in the url, restores the state of the component.
3. in the mounted life cycle hook and in the router's watch'er ($route) call the initialization method from p.2.
4. (this is point 1 vice versa) you cannot directly (without going through the router) change the state when changing any parameter that affects the state, i.e. The paginator should not just change the variable responsible for the page number and update the array of loaded products - this will not change the url, and therefore will not allow you to get the correct link.
How good is this decision? does anyone have something more elegant? how are you doing?
Thank you.