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

Question

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 ?

Evanesce

Yes you should be able to access it in component in way like this.$route.name – August

Answer 1

In Nuxt2

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
        
    }   },

**

Stent

My URL contains some characters after a hash sign. Not path nor name returns the value after # /my/url/#somemore only /my/url/ is returned – Olympium

Answer 2

In Vue2

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

Spectacular

Answer 3

With Nuxt3 and Composition API, you can achieve that with this

<script setup>
const route = useRoute()
console.log('current name', route.name)
</script>

Or with Options API

<script>
export default {
  mounted () {
    console.log('current name', this.$route.name)
  },
}
</script>

As shown in my previous answer here: https://mcmap.net/q/236157/-how-to-get-route-url-params-in-a-page-in-nuxt2-and-3

Tetravalent

For me, this doesnt work. I'm trying it in the stup, and it always says it's undefined – Victim

@Victim feel free to open a new question with some relevant code. – Tetravalent

Answer 4

for Nuxt 3

export default ({
   setup () {
    const route = useRoute()
    return {
      route
    }
  }
})

after in template

{{ route.name }}

Astringent

Answer 5

For Nuxt 3 you can use currentRoute from router.

const { currentRoute } = useRouter();
const routeName = currentRoute.value.name;

Coriolanus

Answer 6

for Nuxt v2 useRouter composition API

import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'

export default defineComponent({
   setup() {
       const route = useRoute()
       const routeName = computed(() => route.value.name)
       return { routeName }
   },
})

Fireweed

Answer 7

Nuxt 3: Vue 3 and setup pattern version

<script setup>
    const route = useRoute(); // built-in composable
    // route.name

    useHead( function() {
        return {
            htmlAttrs: {
                "data-route": route.name,
            },
        };
    });
</script>

Here's a way you can inject it. For dynamic routes, things might be a little more tricky

Kellogg

Answer 8

Just tried {{ $route.name }} in Nuxt3 and got index. No need for any js code.

Saccharo