如何将道具传递给 Nuxt 中的页面？

Question

我要做的就是将参数传递给 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 文档中有一些参考在这里使用下划线定义动态路由，这很奇怪。你如何传递不止一个道具？如果您不想弄乱页面命名约定怎么办？

但无论如何，它根本不起作用。似乎只能通过访问来获取参数的值，正如此处所解释的那样this.$route.params.myprop，这是一种不好的做法。

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

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

Answer 1

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

如何传递多个 prop？

该文档有一个关于动态嵌套路由的部分：

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

这将为您提供一条:category/:subCategory/:id路线。

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