How to get current route name in Nuxt 2 and 3?
vue.jsVuejs2Vue ComponentVue Routernuxt.jsvue.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.
> 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
} },
**
Solution 2 - vue.js
An alternative way is to use either of the following:
this.$route.path
→ Example onhttp://localhost:3000
,{{this.$route.path}}
will print/
this.$route.name
→ Example onhttp://localhost:3000
,{{this.$route.name}}
will printindex
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