Category: Vue

Sometimes, we want to access $route.params in Vue.js.

In this article, we’ll look at how to access $route.params in Vue.js.

How to access $route.params in Vue.js?

To access $route.params in Vue.js, we access it from this in the options API.

In the composition API, we use the useRoute hook.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    get() {
      console.log(this.$route.params.id);
    },
  },
  //...
};
</script>

to get the value of the id route parameter with this.$route.params.id with the options API.

With the composition API, we use the useRoute hook by writing

<script>
import { useRoute } from "vue-router";
//...
export default {
  //...
  setup() {
    const route = useRoute();
    const id = route.params.id;
  },
  //...
};
</script>

We call useRoute to return the route object and then we get the value of the id route parameter with route.params.id.

Conclusion

To access $route.params in Vue.js, we access it from this in the options API.

In the composition API, we use the useRoute hook.

Sometimes, we want to disable a button in Vue.js.

In this article, we’ll look at how to disable a button in Vue.js.

How to disable a button in Vue.js?

To disable a button in Vue.js, we set the disabled prop of the button.

For instance, we write

<template>
  <div>
    <button :disabled="isDisabled">Send Form</button>
  </div>
</template>

to set the disabled prop to the isDisabled reactive property.

Therefore, the disabled attribute will be added to the button only if isDisabled is true.

Conclusion

To disable a button in Vue.js, we set the disabled prop of the button.

Sometimes, we want to get the current route path of lazy-loaded modules on page load with Vue.js and Vue Router.

In this article, we’ll look at how to get the current route path of lazy-loaded modules on page load with Vue.js and Vue Router.

How to get the current route path of lazy-loaded modules on page load with Vue.js and Vue Router?

To get the current route path of lazy-loaded modules on page load with Vue.js and Vue Router, we can use the this.$route.path property.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    get() {
      console.log(this.$route.path);
    },
  },
  //...
};
</script>

to log the value of the current route’s URL path by logging the this.$route.path property in the get method.

Conclusion

To get the current route path of lazy-loaded modules on page load with Vue.js and Vue Router, we can use the this.$route.path property.

Sometimes, we want to get current route name in Nuxt.js.

In this article, we’ll look at how to get current route name in Nuxt.js.

How to get current route name in Nuxt.js?

To get current route name in Nuxt.js, we can use the this.$route.name property.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    get() {
      console.log(this.$route.name);
    },
  },
  //...
};
</script>

to log the name of the current route by logging the value of this.$route.name in the get method.

Conclusion

To get current route name in Nuxt.js, we can use the this.$route.name property.

Sometimes, we want to send JSON web token (JWT) in an Axios GET request.

In this article, we’ll look at how to send JSON web token (JWT) in an Axios GET request.

How to send JSON web token (JWT) in an Axios GET request?

To send JSON web token (JWT) in an Axios GET request, we can add it to the headers.

For instance, we write

<script>
export default {
  //...
  get() {
    const url = "...";
    const token = "...";
    const config = {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
    axios.get(url, config);
  },
  //...
};
</script>

to call axios.get with the url and config.

In config, we add the headers by setting the headers property to an object that has the Authorization header set to the token value.

Conclusion

To send JSON web token (JWT) in an Axios GET request, we can add it to the headers.