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

Question

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

Dan · Accepted Answer · 2023-06-05 12:14:57Z

28

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);
}

edited Jun 5, 2023 at 12:14

answered Feb 18, 2021 at 1:12

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

talm0r · Accepted Answer · 2021-02-18 01:15:49Z

3

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

answered Feb 18, 2021 at 1:15

talm0r

845 bronze badges

2 Comments

Nanda Z Over a year ago

Sorry, but thats not what i want. i need to use query params pattern, not slug

Herbert Van-Vliet Over a year ago

I think this might come in handy one day, just not today.

Mehdi · Accepted Answer · 2024-07-08 14:11:12Z

1

Accessing the query needs get query from currentRoute. currentRoute is Ref type so the query must be gotten from the value property.

<script setup lang="ts">

import { useRouter } from 'vue-router'; 
const router = useRouter();
console.log(router.currentRoute.value.query.ProjectId)

</script>

answered Jul 8, 2024 at 14:11

Mehdi

9741 gold badge9 silver badges13 bronze badges

Comments

Saugat · Accepted Answer · 2022-07-30 12:29:30Z

0

For Vue Router 4 :: Compositon API :: Vue3

Router-link attach params

 <router-link
    style="width: 100%"
    class="btn btn-success btn-block edit"
    :to="{ name: 'editUser',params: {id: user.id}}">
       <i class="fa-solid fa-user-gear"></i>
 </router-link>

In a page you are receiving,

<script>

export default {
  props: ["id"],
  setup(props, context) {
        console.log(props.id);
  },
};
</script>

In Your app.js

import { createApp } from 'vue';
...
...
const app = createApp(root);

app.use(router);

router.isReady().then(() => {
    app.mount('#app');
})

answered Jul 30, 2022 at 12:29

Saugat

13 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Using `useRoute`

Using a prop (Not recommended)

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Using useRoute

Using a prop (Not recommended)

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Using `useRoute`