vue.js - 如何将 Prop 传递给 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 ，这很奇怪。你如何传递不止一个 Prop ？如果您不想弄乱页面命名约定怎么办？

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

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

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

Answer 1

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

How do you pass more than one prop?

文档中有一个部分是 dynamic nested routes :

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

这会给你一个 :category/:subCategory/:id路线。

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