Working with Query Parameters
The router provides powerful helpers for working with URL query parameters in a reactive, type-safe way. Perfect for search interfaces, filters, pagination, and any URL-driven UI state.
Configuration
Configure the querystring system once in your main.js:
Basic Usage
Access query parameters reactively with the query() function:
Updating Query Parameters
Use updateQuerystring() to modify URL query parameters:
undefined vs null
undefined- Removes the parameter completelynull- Keeps parameter with empty value (by default removed, usedropNull: falseto keep)
Array Parameters
The router automatically handles array parameters in multiple formats:
Auto-Detect (Recommended)
Automatically detects and parses both comma and repeat formats:
Repeat Format
Each value gets its own parameter:
Comma Format
Values separated by commas in a single parameter:
TypeScript Support
Define types for full intellisense and type safety:
Practical Examples
Search with Pagination
Multi-Select Filters
Sort and Order
Manual Parsing (Without Configuration)
You can also parse querystrings manually without global configuration:
Merge Behavior
By default, updateQuerystring() merges with existing parameters.
Use merge: false to replace all parameters:
Best Practices
Use TypeScript Interfaces
Define interfaces for your query parameters to get full intellisense and catch errors early.
Reset Related Parameters
When changing filters or search, remember to reset the page number to 1.
Handle Missing Parameters
Always provide defaults when accessing query parameters since they might not be present in the URL.
Try It Live
See querystring helpers in action with our interactive demos: