How can I get query parameters from a URL in Vue js

Question

How can I fetch query parameters in Vue js   E g  http   somesite com test yay   Can   t find a way to fetch or do I need to use pure JS or some library for this

User · Answer

You can get By Using this function   console log this  route query test

User · Answer

According to the docs of route object  you have access to a  route object from your components  which exposes what you need  In this case   from your component console log this  route query test     outputs  yay

User · Answer

Another way  assuming you are using vue-router   is to map the query param to a prop in your router  Then you can treat it like any other prop in your component code  For example  add this route          path    mypage        name   mypage        component  MyPage       props   route    gt     foo  route query foo          Then in your component you can add the prop as normal   props        foo            type  String          default  null            Then it will be available as this foo and you can do anything you want with it  like set a watcher  etc

User · Answer

Without vue-route  split the URL  var vm   new Vue            created           let uri   window location href split           if  uri length    2              let vars   uri 1  split   amp           let getVars             let tmp             vars forEach function v           tmp   v split               if tmp length    2          getVars tmp 0     tmp 1                   console log getVars            do               updated           Another solution https   developer mozilla org en-US docs Web API HTMLHyperlinkElementUtils search   var vm   new Vue            created           let uri   window location search substring 1        let params   new URLSearchParams uri       console log params get  var name            updated

User · Answer

More detailed answer to help the newbies of VueJS    First define your router object  select the mode you seem fit  You can declare your routes inside the routes list   Next you would want your main app to know router exists  so declare it inside the main app declaration    Lastly they  route instance holds all the information about the current route  The code will console log just the parameter passed in the url    Mounted is similar to document ready    ie its called as soon as the app is ready     And the code itself    lt script src  https   unpkg com vue-router  gt  lt  script gt  var router   new VueRouter       mode   history       routes         var vm    new Vue       router      el    app       mounted  function             q   this  route query q         console log q

User · Answer

As of this date  the correct way according to the dynamic routing docs is   this  route params yourProperty   instead of  this  route query yourProperty

User · Answer

Try this code  var vm   new Vue        created                 let urlParams   new URLSearchParams window location search              console log urlParams has  yourParam        true            console log urlParams get  yourParam         quot MyParam quot

User · Answer

You can use vue-router I have an example below    url   www example com name john amp lastName doe  new Vue     el    app     data        name          lastName            beforeRouteEnter to  from  next          if Object keys to query  length     0      if the url has query   query          next vm   gt             vm name   to query name          vm lastName   to query lastName                     next            Note  In beforeRouteEnter function we cannot access the component s properties like  this propertyName That s why i have pass the vm to next function It is the recommented way to access the vue instance Actually the vm it stands for vue instance

User · Answer

If your url looks something like this   somesite com something 123   Where  123  is a parameter named  id   url like  something  id   try with   this  route params id

[javascript] How can I get query parameters from a URL in Vue.js?

Examples related to javascript

Examples related to vue.js

Examples related to vue-router

Examples related to url-parameters