如何将道具传递到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文档中有一些参考，使用下划线定义动态路由here，这很奇怪。您如何传递多个道具？如果您不想弄乱页面命名约定怎么办？

但是无论如何，它根本不起作用。似乎只有通过访问this.$route.params.myprop才能获取参数的值，这是不正确的做法as explained here。

所以我如何设置路由“ / users / 123”，在/ pages中调用Users.vue组件，并实际上获得“ 123”作为道具？

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

Answer 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生成的路由，则可以在nuxt.config.js中使用extendRoutes，或在router-module中使用。