How to get current route name in Nuxt.js?
Solution 1
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
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
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 } }, })
lukaszkups
Just another front-end developer. And a tech writer. Working on tavuelo and Lem Editor. https://lukaszkups.net
Updated on July 09, 2022Comments
-
lukaszkups almost 2 years
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
? -
Arman Fatahi over 5 yearsMy URL contains some characters after a hash sign. Not path nor name returns the value after # /my/url/#somemore only /my/url/ is returned