How to Get Route Url Params in a Page in Nuxt2 and 3

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

Note: This answer is for Vue2 and Nuxt2. If you are looking for answer for nuxt3 or vue3, refer to other answers.

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.

How to get current route name in Nuxt 2 and 3?

yes you can use vuejs route objects like $route.name or $route.path

$nuxt.$route.path

return current path

$nuxt.$route.name

The name of the current route, if it has one.

Route Object Properties

A route object represents the state of the current active route. It
contains parsed information of the current URL and the route records
matched by the URL.

$route.path
- type: string
- A string that equals the path of the current route, always resolved as an absolute path. e.g. "/foo/bar".
$route.fullPath
- type: string
- The full resolved URL including query and hash.

And if you want to get the url params. Like this :

You do this:

  data() {
    return {
       zone: this.$nuxt.$route.query.zone,
       jour: this.$nuxt.$route.query.jour

    }   },

nuxt how to have a question mark after the page name

Change your _index.vue to _id.vue which is the nuxt default

https://codesandbox.io/s/blissful-wave-cjqp7?file=/pages/search/_id.vue

How to Get Route Url Params in a Page in Nuxt2 and 3