How to get Query params in VueJs 3?

by

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

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 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) {
  console.log(props.query.q);
  console.log(props.query.status);
}
    Reply

  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
    this.$route.params.propname

    Reply

Leave a Comment