Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get current route name in Nuxt.js?

I'm using Nuxt.js for building a static website.

How to access in component's script code currently displayed route name (I would like to avoid reading direct url from browser location)?

Can I somehow access $route.name ?

like image 767
lukaszkups Avatar asked Jun 25 '17 16:06

lukaszkups


People also ask

How do I get the current route name in NUXT?

Answer: Use the Vue. To get current route name from a URL in a Nuxt app that uses Vue Router you can use vue. js route objects like this. $route.name or this. $route.

Where is body tag in NUXT?

It's available under the "head. boddyAttrs. class" attribute and you can refer below.

Can I use Vue router in NUXT?

Nuxt automatically generates the vue-router configuration for you, based on your provided Vue files inside the pages directory. That means you never have to write a router config again!


2 Answers

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 : enter image description here You do this:

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

**

like image 186
Mohammad Fanni Avatar answered Sep 28 '22 09:09

Mohammad Fanni


An alternative way is to use either of the following:

  • this.$route.path → Example on http://localhost:3000 , {{this.$route.path}} will print /
  • this.$route.name → Example on http://localhost:3000, {{this.$route.name}} will print index
like image 43
Billal Begueradj Avatar answered Sep 28 '22 10:09

Billal Begueradj