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!
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.
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.
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']