How to get route url params in a page in Nuxt2 and 3?

Question

I am using Nuxt.js, and have a dymanic page which is defined under

pages/post/_slug.vue

So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug parameter value inside my page.

Currently I am geting it using asyncData as follows:

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

This is working fine, but I think this is not the best way, and there should be a better way to make the parameter available to the page. Any help is appreciated!

Answer 1

To read params from URL you should use this way in Nuxt:

this.$route.query.<name_of_your_parameter_in_url>

For example

URL: https://example.com/example/?token=QWERTYUASDFGH

with this line of code, you can read token:

this.$route.query.token

and give you QWERTYUASDFGH.

Answer 2

Simply you can access routing parameters

for global uses but it is not good practice:

window.$nuxt._route.params

for local uses under pages/components/layout etc, Always we should practice like below

this.$route

or

this.$nuxt._route.params

Answer 3

If you are in the store context (for example actions.js), you can access the query parameters like this:

this.$router.currentRoute.query['param_name']

Answer 4

Other answers are mostly enough, if you want to access route info inside apollo smart query:

  apollo: {
    items: {
      query: jobsBy,
      variables() {
        return {
          clientId: this.$route.query.id
        }
      },
    }
  }

Answer 5

To the best of my knowledge, this already is the best way, if not the only one to do that. But I could suggest an slightly different approach that maybe fit to your needs. Use the asyncData method to retrieve the data from the server instead of put a param at your VM and process later, if is your case. Then, you can handle the result data at the presentation logic and not any kind of request. On the other hand, also you could use, fetch if you don't want to pass anything to the VM or use a middleware instead, according to your needs.

Answer 6

The best way for me is :

async asyncData(context){
      const query_params=context.route.query;
}

Answer 7

With the release of a stable version of Nuxt3, I feel like updating with an answer using the composition API.

This is how you would access all the interesting parts of the current route in any .vue file

<script setup>
const route = useRoute()
</script>

<template>
  <pre>{{ route }}</pre>
</template>

route getting the following in case of going to http://localhost:5678/about?fruit=watermelon

{
  "path": "/about",
  "name": "about",
  "params": {},
  "query": {
    "fruit": "watermelon"
  },
  "hash": "",
  "fullPath": "/about?fruit=watermelon",
  "matched": [
    {
      "path": "/about",
      "name": "about",
      "meta": {},
      "props": {
        "default": false
      },
      "children": [],
      "instances": {},
      "leaveGuards": {
        "Set(0)": []
      },
      "updateGuards": {
        "Set(0)": []
      },
      "enterCallbacks": {},
      "components": {
        "default": {
          "__hmrId": "0a606064",
          "__file": "/home/kissu/code/test/n3-default/pages/about.vue"
        }
      }
    }
  ],
  "meta": {}
}

If you use the Vue devtools, you can also click on a component and find the instance via the console (helpful if you want to quickly inspect the object). It gives a bit more details than the Routes tab.

More info available here: https://v3.nuxtjs.org/api/composables/use-route#useroute

---

With Options API, it would be the following (as in the console)

<script>
export default {
  mounted () {
    console.log('route object', this.$.appContext.app.$nuxt._route.query)
  },
}
</script>

PS: there is maybe a shorter way that I don't know yet.

PS2: I'm always confused between query params and "route params", hence this memento for a difference could be useful.