Phong Duong

🔎Search

Retrieve query with Vue Router

04-03-2021 | #vuejs

You can retrieve the URL's query from the component by using $route.query.

It returns an object of query values. The object's properties are the queries and the values are the queries values.

I have a URL query like below

/search?title=text&description=hello

$route.query returns the following object

route.query
/*
{
  title: "text",
  description: "hello"
}
*/

You can also pass the query as the props to the component.

When you create the router instance, you pass the props property to your route

const routes = [
  { path: "/search", component: Search, props: (route) => ({ query: route.query }) }
];

Now you can retrieve the query by using $props in your component.

$props.query
/*
{
  title: "text",
  description: "hello"
}
*/

Here is the demo. You can check the result in the console tab

Share: TwitterFacebookLinkedInHacker News