How to get route url params in a page in Nuxt2 and 3?
Javascriptvue.jsnuxt.jsNuxtjs3Javascript Problem Overview
I am using Nuxt.js, and have a dymanic page which is defined under
pages/post/_slug.vue
So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug parameter value inside my page.
Currently I am geting it using asyncData as follows:
asyncData ({ params }) {
// called every time before loading the component
return {
slug: params.slug
}
}
This is working fine, but I think this is not the best way, and there should be a better way to make the parameter available to the page. Any help is appreciated!
Javascript Solutions
Solution 1 - Javascript
In the .vue file, to get the Vue router route object:
this.$route
( notice the Vue router is under the this.$router
object)
The $route
object has some useful properties:
{
fullpath: string,
params: {
[params_name]: string
},
//fullpath without query
path: string
//all the things after ? in url
query: {
[query_name]: string
}
}
You can use the $route
object like this:
<script>
export default {
mounted() {
console.log(this.$route.fullPath);
}
};
</script>
the url path params is under the route.params
, as in your case route.params.slug
<script>
export default {
mounted() {
console.log(this.$route.params.slug);
}
};
</script>
the Vue mouted hook only run on client, when you want to get the params on server, you can use the asyncData method:
<script>
export default {
asyncData({route, params}) {
if (process.server) {
//use route object
console.log(route.params.slug)
//directly use params
console.log(params.slug)
}
}
};
</script>
But, pay attention:
> It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. ref
If you don't need the params information on server, like you don't need to get data based on the params on server side, I think the mounted hook will suffice.
Solution 2 - Javascript
To read params from URL you should use this way in Nuxt:
this.$route.query.<name_of_your_parameter_in_url>
For example
URL: https://example.com/example/?token=QWERTYUASDFGH
with this line of code, you can read token
:
this.$route.query.token
and give you QWERTYUASDFGH
.
Solution 3 - Javascript
Simply you can access routing parameters
for global uses but it is not good practice:
> window.$nuxt._route.params
for local uses under pages/components/layout etc, Always we should practice like below
> this.$route
or
> this.$nuxt._route.params
Solution 4 - Javascript
If you are in the store context (for example actions.js), you can access the query parameters like this:
this.$router.currentRoute.query['param_name']
Solution 5 - Javascript
Other answers are mostly enough, if you want to access route info inside apollo
smart query:
apollo: {
items: {
query: jobsBy,
variables() {
return {
clientId: this.$route.query.id
}
},
}
}
Solution 6 - Javascript
To the best of my knowledge, this already is the best way, if not the only one to do that. But I could suggest an slightly different approach that maybe fit to your needs. Use the asyncData
method to retrieve the data from the server instead of put a param at your VM and process later, if is your case. Then, you can handle the result data at the presentation logic and not any kind of request. On the other hand, also you could use, fetch if you don't want to pass anything to the VM or use a middleware instead, according to your needs.
Solution 7 - Javascript
The best way for me is :
async asyncData(context){
const query_params=context.route.query;
}
Solution 8 - Javascript
With the release of a stable version of Nuxt3, I feel like updating with an answer using the composition API.
This is how you would access all the interesting parts of the current route in any .vue
file
<script setup>
const route = useRoute()
</script>
<template>
<pre>{{ route }}</pre>
</template>
route
getting the following in case of going to http://localhost:5678/about?fruit=watermelon
{
"path": "/about",
"name": "about",
"params": {},
"query": {
"fruit": "watermelon"
},
"hash": "",
"fullPath": "/about?fruit=watermelon",
"matched": [
{
"path": "/about",
"name": "about",
"meta": {},
"props": {
"default": false
},
"children": [],
"instances": {},
"leaveGuards": {
"Set(0)": []
},
"updateGuards": {
"Set(0)": []
},
"enterCallbacks": {},
"components": {
"default": {
"__hmrId": "0a606064",
"__file": "/home/kissu/code/test/n3-default/pages/about.vue"
}
}
}
],
"meta": {}
}
If you use the Vue devtools, you can also click on a component and find the instance via the console (helpful if you want to quickly inspect the object). It gives a bit more details than the Routes
tab.
More info available here: https://v3.nuxtjs.org/api/composables/use-route#useroute
With Options API, it would be the following (as in the console)
<script>
export default {
mounted () {
console.log('route object', this.$.appContext.app.$nuxt._route.query)
},
}
</script>
PS: there is maybe a shorter way that I don't know yet.
PS2: I'm always confused between query params
and "route params"
, hence this memento for a difference could be useful.