useQueryParams adds a layer of convenience on top of useQueryParam as it allows developers to bind all properties on a reactive object as query parameters. Additionally, it will accept an object specifying default values and an array for omitting specific keys. useQueryParams requires VueUse's useUrlSearchParams, so your application must include VueUse as a dependency.
Important: Note that each of the examples below are competing for control of the browser's query string. Typically, the last example will be active on page load. You should select a value from the example you are exploring to ensure its query params are active.
Developers may also specify default values for each property by also passing in an object where the property key is set to the default value. When a default value is set, the query parameter will not be present if the current value equals the default value. Using default values helps keep urls concise and readable.
Finally, developers may omit specific keys by providing an array of key names as the fourth parameter. This example demonstrates this feature by omitting Filter 3. Note, if no defaults are specified, you need to pass an empty object for the defaults as shown in the example. If you only need one or two properties from an object, consider registering them individually with useQueryParam.