我正在使用 Nuxt.js,并且有一个在
下定义的动态页面pages/post/_slug.vue
因此,当我访问页面网址时,例如,http://localhost:3000/post/hello-world,如何在我的页面中读取此 slug 参数值。
目前我正在使用 asyncData 获取它,如下所示:
asyncData ({ params }) {
// called every time before loading the component
return {
slug: params.slug
}
}
这工作正常,但我认为这不是最好的方法,应该有更好的方法使参数可用于页面。任何帮助表示赞赏!
在.vue文件中,获取Vue路由器路由对象:
this.$route
(注意 Vue router 位于
this.$router
对象下方)
$route
对象有一些有用的属性:
{
fullpath: string,
params: {
[params_name]: string
},
//fullpath without query
path: string
//all the things after ? in url
query: {
[query_name]: string
}
}
您可以像这样使用
$route
对象:
<script>
export default {
mounted() {
console.log(this.$route.fullPath);
}
};
</script>
url路径参数位于
route.params
下,就像你的情况一样route.params.slug
<script>
export default {
mounted() {
console.log(this.$route.params.slug);
}
};
</script>
Vue moted 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>
但是,请注意:
它将在服务器端调用一次(在对 Nuxt 应用程序的第一个请求时),在导航到其他路线时在客户端调用。 参考
如果你不需要服务器上的参数信息,就像你不需要根据服务器端的参数获取数据一样,我认为安装的钩子就足够了。
要从 URL 读取参数,你应该在 Nuxt 中使用这种方式:
this.$route.query.<name_of_your_parameter_in_url>
例如
网址:
https://example.com/example/?token=QWERTYUASDFGH
通过这行代码,您可以阅读
token
:
this.$route.query.token
并给你
QWERTYUASDFGH
。
随着 Nuxt3 稳定版本的发布,我想使用组合 API 来更新答案。
这是您在任何
.vue
文件中访问当前路线的所有有趣部分的方式
<script setup>
const route = useRoute()
</script>
<template>
<pre>{{ route }}</pre>
</template>
route
如果前往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": {}
}
如果您使用 Vue 开发工具,您还可以单击组件并通过控制台找到实例(如果您想快速检查对象,这会很有帮助)。它提供了比
Routes
选项卡更多的详细信息。
更多信息请访问:https://v3.nuxtjs.org/api/composables/use-route#useroute
使用Options API,它将如下(如在控制台中)
<script>
export default {
mounted () {
console.log('route object', this.$.appContext.app.$nuxt._route.query)
},
}
</script>
PS:也许还有一种我还不知道的更短的方法。
PS2:我总是对
query params
和 "route params"
感到困惑,因此 这个差异纪念品 可能很有用。
您可以轻松访问路由参数
适合全球使用,但这不是一个好的做法:
窗口.$nuxt._route.params
对于页面/组件/布局等下的本地使用,我们总是应该像下面这样练习
这个.$路线
或
这个.$nuxt._route.params
如果您在商店上下文中(例如 actions.js),您可以像这样访问查询参数:
this.$router.currentRoute.query['param_name']
其他答案已经足够了,如果你想在
apollo
智能查询中访问路线信息:
apollo: {
items: {
query: jobsBy,
variables() {
return {
clientId: this.$route.query.id
}
},
}
}
声明动态路由
在nuxt2中,下划线
_
用于动态路由,在nuxt3中,而不是
下划线 _
动态路由现在使用方括号 []
访问参数
在 nuxt2 中,可以在
$route
对象this.$route.params
useRoute
可组合const { params } = useRoute()
据我所知,这已经是最好的方法,即使不是唯一的方法。但我可以建议一种稍微不同的方法,也许适合您的需求。 使用
asyncData
方法从服务器检索数据,而不是在虚拟机中放置参数并稍后处理(如果是您的情况)。然后,您可以在表示逻辑处处理 result 数据,而不是任何类型的数据请求。另一方面,如果您不想将任何内容传递给 VM,也可以使用 fetch,或者根据您的需要使用 middleware。
对我来说最好的方法是:
async asyncData(context){
const query_params=context.route.query;
}