{"id":12609,"date":"2025-06-24T10:50:42","date_gmt":"2025-06-24T10:50:42","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12609"},"modified":"2025-06-24T12:05:23","modified_gmt":"2025-06-24T12:05:23","slug":"get-url-query-parameters-in-vue-3-component","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/get-url-query-parameters-in-vue-3-component","title":{"rendered":"Get URL Query Parameters in Vue 3 Component"},"content":{"rendered":"<p><strong>In the Composition API, we use useRoute from vue-router to access query parameters, allowing us to retrieve and react to changes in URL query strings within Vue 3 components.<\/strong><\/p>\n<p>To retrieve URL query parameters in a Vue 3 component using the Composition API:-<\/p>\n<h3>Example Implementation:<\/h3>\n<p>Assuming you have a URL like http:\/\/localhost:8001\/login?id=1, here&#8217;s how you can access the id parameter in your Vue 3 component:<br \/>\n<img decoding=\"async\" class=\"alignright size-full wp-image-12611\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/06\/24104742\/vu-js-implementation.png\" alt=\"vu-js-implementation\" width=\"725\" height=\"598\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/06\/24104742\/vu-js-implementation.png 725w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/06\/24104742\/vu-js-implementation-300x247.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/p>\n<p><strong><em>Note:<\/em> If you&#8217;re using the <span style=\"color: #99cc00;\"><strong>script setup<\/strong><\/span> syntax, the implementation would look like this:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignright size-full wp-image-12612\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/06\/24105001\/syntax-script.png\" alt=\"syntax-script\" width=\"725\" height=\"598\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/06\/24105001\/syntax-script.png 725w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/06\/24105001\/syntax-script-300x247.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/unit-testing-with-jest-vue-test-utils\" target=\"_blank\">Unit Testing Vue Components<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the Composition API, we use useRoute from vue-router to access query parameters, allowing us to retrieve and react to changes in URL query strings within Vue 3 components. To retrieve URL query parameters in a Vue 3 component using the Composition API:- Example Implementation: Assuming you have a URL like http:\/\/localhost:8001\/login?id=1, here&#8217;s how you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-12609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12609"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12609"}],"version-history":[{"count":7,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12609\/revisions"}],"predecessor-version":[{"id":12643,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12609\/revisions\/12643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12610"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}