How can i get query parameters from a url in vue js

Here's an example code snippet:

javascript
var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

Here's a more detailed guide for Vue.js beginners:

• First, define your router object and select the appropriate mode. Declare your routes in the route configuration.
• Next, ensure your main application is aware of the router by including it in the main application setup.
• Finally, the $route instance holds all information about the current route. This code logs only the parameters passed in the URL. (Note: mounted is similar to document.ready, called immediately after the application is ready.)

Here's the code itself:

javascript
<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm = new Vue({
    router,
    el: '#app',
    mounted: function() {
        const q = this.$route.query.q;
        console.log(q);
    },
});

Another approach (assuming you're using vue-router) is to map query parameters to props within the router. Then you can treat it like any other prop in your component code. For example, add this route:

javascript
{
  path: '/mypage',
  name: 'mypage',
  component: MyPage,
  props: (route) => ({ foo: route.query.foo }),
}

Then in your component, you can define the prop as usual:

javascript
props: {
  foo: {
    type: String,
    default: null,
  }
},

This makes it available as this.foo, which you can use for any purpose (e.g., setting observers).

In Vue.js, you can access query parameters in the URL (also known as query strings) using this.$route.query. Here, $route is an object from Vue Router that provides various route information, including query parameters for the current route. Each query parameter is a property of the $route.query object, and you can retrieve its value by the property name.

For example, if the URL is:

shell
http://example.com/?userId=123&isAdmin=true

Inside your Vue component, you can retrieve the userId and isAdmin query parameters like this:

javascript
export default {
  mounted() {
    // Retrieve query parameters
    const userId = this.$route.query.userId;
    const isAdmin = this.$route.query.isAdmin === 'true'; // Convert to boolean

    console.log(userId); // Output: 123
    console.log(isAdmin); // Output: true
  }
}

Here, mounted() is one of Vue's lifecycle hooks, called after the component is mounted to the DOM, making it a good time to retrieve query parameters.

If you need to respond to changes in query parameters, you can use Vue's watch property to observe changes in $route:

javascript
export default {
  watch: {
    '$route.query': {
      immediate: true, // Trigger immediately with current values
      handler(newQuery, oldQuery) {
        // Handle changes when query parameters update
        console.log('New query params:', newQuery);
      }
    }
  }
}

In this example, when URL query parameters change, the handler function is called and receives both the new and old query parameter objects. The immediate: true option ensures the handler is called immediately with the current query parameter values when the watcher is created.

Note: The above examples assume you have set up Vue Router in your Vue.js project. Without Vue Router, you cannot use this.$route to retrieve query parameters.