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

vue.jsVuejs2Vue ComponentVue Routernuxt.js

vue.js Problem Overview


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 ?

vue.js Solutions


Solution 1 - vue.js

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

**

Solution 2 - vue.js

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

Solution 3 - vue.js

for Nuxt v2 useRouter composition API

> js > import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api' > > export default defineComponent({ > setup() { > const route = useRoute() > const routeName = computed(() => route.value.name) > return { routeName } > }, >}) >

Solution 4 - vue.js

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionlukaszkupsView Question on Stackoverflow
Solution 1 - vue.jsMohammad FanniView Answer on Stackoverflow
Solution 2 - vue.jsBillal BegueradjView Answer on Stackoverflow
Solution 3 - vue.jsJayanga JayathilakeView Answer on Stackoverflow
Solution 4 - vue.jskissuView Answer on Stackoverflow