How to get query params in Vue.js 3 setup?

I want to make search page which after I click its button will be redirected to another page. And this page will be like this

http://localhost:8080/search?q=foo

and my router index.js looks like this

const routers = [
  {
    path: '/search',
    name: 'Search',
    component: SearchPage,
    props: route => ( { query: route.query.q } )
  }
]

and the question is how do i get the query value in target page SearchPage, in Vue.js 3? This Answer is still confusing me, because not using composition API and not in vuejs 3

Using useRoute

You don't need to send the query as a prop. It's better to use useRoute because it's simpler and it can be accessed from any component, not just the page view component.

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.query);
  }
}

Using a prop (Not recommended)

First change the router mapping so that query maps to the query object:

props: route => ({ query: route.query })

In the destination component, SearchPage, create a query prop which will receive the query object from the router:

props: ['query']

And access it in setup via the props argument:

props: ['query'],
setup(props) {
  console.log(props.query.q);
  console.log(props.query.status);
}