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.config.js中使用extendRoutes，如果要避免完全使用默认的Nuxt生成的路由，则可以使用router-module。

Answer 2

你的意思是这样吗？

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

现在输入网址栏

http://yourDomain/user/123

在页面created的{{1}}生命周期挂钩中，您应该看到控制台日志123

user

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

2 个答案: