Difference between params and query in vue router?

1
votes

I cannot clearly figure out the difference between params and query in vue router. I met a case recently that makes me confused. There are page A and page B, I want to route from page A to page B, page B uses dynamic route (for example '/user/:id/:age/:address') and the data come from params object (get id, age, address from params), when I reload page B, it failed and throw a 404 not found (cannont get /user/1/24/xxxstreet). I can reload the page if I use query rather than params (for example '/user?id=1&age=24&address=xxxstreet'). So may anybody help me figure out the difference between params and query in vue router?

1
componentsvue.jsvue-router
Show us your code please (Router, components...) – Sebastian
As per the documentation router.vuejs.org/api/#to <!-- named route using params--> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> <!-- with query, resulting in /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}" >Register</router-link – Ricky-U

1 Answers

13
votes

For best rest api design practices, they are used in different contexts.

Params are the resources you are trying to fetch.
Example: user/:id means you are accessing a user resource.

Queries are used when you want to filter those resources.
Example: users/?age="20" means you are filtering a set of users whose age is equal to 20.