How to get Query params in VueJs 3?

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


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 VueJs 3?
this Answer still confusing me, because not using composition API and not in vuejs 3

18 thoughts on “How to get Query params in VueJs 3?”

  1. 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) {
  2. another setup you can try, send propname by url
    { path: '/search/:propname', name: 'Search', component: SearchPage, props: true },
    and on searchpage, on created() you can get recive it


Leave a Comment