如何将道具传递到 Nuxt 中的页面？答案

【问题标题】：How to pass props to a page in Nuxt?如何将道具传递到 Nuxt 中的页面？
【发布时间】：2020-06-12 01:46:00
【问题描述】：

我要做的只是将参数传递给 Nuxt 中的页面。在 Vue 中，这很容易：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

或

<router-link to="/user/123">User</router-link>

你只需要在 router.js 中正确定义你的路由。

我还没有在 Nuxt 中找到方法。

在 Nuxt 文档中有一些关于使用下划线定义动态路由 here 的参考，这很奇怪。你如何传递多个道具？如果您不想弄乱页面命名约定怎么办？

但无论如何，它根本行不通。似乎只能通过访问this.$route.params.myprop 来获取参数的值，这是一种不好的做法as explained here。

那么如何设置路由“/users/123”，调用/pages中的Users.vue组件，并实际得到“123”作为prop？

（不，我不会使用 VueX。仅使用全局状态来传递参数是非常糟糕的做法。）

【问题讨论】：

Nuxt 会将文件从目录/users/_userId.vue 转换为路由/usesrs/:userId。那么它应该可以工作了。

标签： vue.js nuxt.js

【解决方案1】：

下划线文件名系统是在 Nuxt.js 上创建动态路由的推荐方式。

你如何传递多个道具？

文档中有一个dynamic nested routes 部分：

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

这将为您提供:category/:subCategory/:id 路由。

此外，您可以在 nuxt.config.js 中使用 extendRoutes，如果您想完全避免使用默认 Nuxt 生成的路由，则可以使用 router-module。

【讨论】：

【解决方案2】：

你的意思是这样的吗？

<nuxt-link to="/user/:id">User</nuxt-link>

现在输入网址栏

http://yourDomain/user/123

在user页面的created生命周期钩子中，您应该会看到123的控制台日志

created(){
   console.log("your id is: " + this.$route.params.id);
}

【讨论】：