66

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 ?

1
  • 2
    Yes you should be able to access it in component in way like this.$route.name Jun 25, 2017 at 19:44

6 Answers 6

132

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

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

**

1
  • 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 Aug 16, 2018 at 11:22
24

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
12

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://stackoverflow.com/a/72212136/8816585

2
  • For me, this doesnt work. I'm trying it in the stup, and it always says it's undefined
    – CodeHacker
    Jul 15, 2022 at 14:46
  • @CodeHacker feel free to open a new question with some relevant code.
    – kissu
    Jul 15, 2022 at 14:47
4

for Nuxt 3

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

after in template

{{ route.name }}
2

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

For Nuxt 3 you can use currentRoute from router.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.