Javascript Nuxt.JS：如何在页面中获取路由 url 参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48068520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nuxt.JS: How to get route url params in a page
提问by asanas
I am using Nuxt.js, and have a dymanic page which is defined under
我正在使用 Nuxt.js，并且有一个在下面定义的动态页面
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.
因此，当我访问页面 url 时，比如http://localhost:3000/post/hello-world，我如何在我的页面中读取这个 slug 参数值。
Currently I am geting it using asyncData as follows:
目前我使用 asyncData 获取它，如下所示：
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!
这工作正常，但我认为这不是最好的方法，应该有更好的方法使参数可用于页面。任何帮助表示赞赏！
回答by Franci
In the .vue file, to get the Vue router route object:
在 .vue 文件中，获取 Vue 路由器路由对象：
this.$route
( notice the Vue routeris under the this.$routerobject)
（注意Vue路由器在this.$router对象下）
The $routeobject has some useful properties:
该$route对象有一些有用的属性：
{
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 $routeobject like this:
您可以$route像这样使用对象：
<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
url 路径参数在 下route.params，就像你的情况一样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:
Vue mouted hook 只在客户端运行，当你想在服务器上获取参数时，你可以使用 asyncData 方法：
<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>
if you don't need the parms information on server, or you don't need any data before rendering ( like make a http request based on the route params before rendering), I think the mounted hook will suffice.
如果您不需要服务器上的 parms 信息，或者您在渲染前不需要任何数据（例如在渲染前根据路由参数发出 http 请求），我认为挂载的钩子就足够了。
回答by Md Mahamudul Hasan
Simply you can access routing parameters
只需访问路由参数即可
for global uses but it is not good practice:
供全球使用，但不是好的做法：
window.$nuxt._route.params
window.$nuxt._route.params
for local uses under pages/components/layout etc, Always we should practice like below
对于页面/组件/布局等下的本地使用，我们总是应该像下面这样练习
this.$route
this.$route
or
或者
this.$nuxt._route.params
this.$nuxt._route.params
回答by Pravin Singh
Nuxt documentation is well maintained and as per the https://nuxtjs.org/api/context/asyncData exposes API to access various router and server features. For your more clarification you can check out the official examples on Nuxtjs portal. https://nuxtjs.org/examples/custom-routes
Nuxt 文档维护良好，根据https://nuxtjs.org/api/context/asyncData 公开 API 以访问各种路由器和服务器功能。为了您的更多说明，您可以查看 Nuxtjs 门户上的官方示例。 https://nuxtjs.org/examples/custom-routes
回答by Nyagolova
If you are in the store context (for example actions.js), you can access the query parameters like this:
如果您在商店上下文中（例如 actions.js），您可以像这样访问查询参数：
this.$router.currentRoute.query['param_name']
回答by bob
Other answers are mostly enough, if you want to access route info inside apollosmart query:
如果您想在apollo智能查询中访问路线信息，其他答案基本上就足够了：
apollo: {
items: {
query: jobsBy,
variables() {
return {
clientId: this.$route.query.id
}
},
}
}
回答by monk
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 asyncDatamethod 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 resultdata 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 VMor use a middlewareinstead, according to your needs.
据我所知，这已经是最好的方法，如果不是唯一的方法的话。但我可以建议一种可能适合您需求的略有不同的方法。使用该asyncData方法从服务器检索数据，而不是在您的 VM 中放置一个参数并稍后处理（如果是您的情况）。然后，您可以在表示逻辑处处理结果数据，而不是任何类型的请求。另一方面，如果您不想将任何内容传递给VM或使用中间件，您也可以根据需要使用 fetch 。
