Nuxt.JS: How to get route url params in a page

In the .vue file, to get the Vue router route object:

    this.$route

( notice the Vue router is under the this.$router object)

The $route object has some useful properties:

{  fullpath: string,  params: {    [params_name]: string  },  //fullpath without query  path: string  //all the things after ? in url  query: {    [query_name]: string  }}

You can use the $route object like this:

    <script>    export default {      mounted() {        console.log(this.$route.fullPath);      }    };    </script>

the url path params is under the route.params, as in your case route.params.slug

    <script>    export default {      mounted() {        console.log(this.$route.params.slug);      }    };    </script>

the Vue mouted hook only run on client, when you want to get the params on server, you can use the asyncData method:

    <script>    export default {        asyncData({route, params}) {            if (process.server) {                //use route object                console.log(route.params.slug)                //directly use params                console.log(params.slug)            }        }    };    </script>

But, pay attention:

It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.ref

If you don't need the params information on server, like you don't need to get data based on the params on server side, I think the mounted hook will suffice.

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.

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