How to properly make an updatable vue component linked to vue-router with url parameters?

Question

Vue.js

It's about how to make a vue component that has many parameters in the url affect its appearance (for example, page number and size, two dozen filters, sorting options), so that all these parameters are updated in the url, and when copying and reopening the page, all these parameters are taken into account by the component, so that when you navigate back and forth through the browser history, the state is restored, and so that we have a lot of buttons and a list for managing parameters in the component, and with each click the entire component is updated, the data from the server is automatically loaded.
In the course of various experiments, I came to this conclusion: we should write the component as follows:
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.

Answer 1

In :to for router-link and in push, you can pass an object of the form {name: 'route name', params: {key1: value1, key2: value2...}} which will greatly facilitate task 1. Moreover, if you specify in the route properties props: true, then all route parameters will be passed to the props of the component, which will solve task 2 and get rid of 3. Instead of changing props, do $router.push, yes. Well, or .replace if needed.