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

Answer 2

你是说像这样的东西吗？

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

，然后在url栏中键入

http://yourDomain/user/123

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

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