如何使用vue-router参数

Question

我现在很高兴与路由器合作.我想导航到另一个页面,我使用以下代码:

this.$router.push({path: '/newLocation', params: { foo: "bar"}});

然后我希望它在新的组件上

this.$route.params

这不起作用.我也尝试过:

this.$router.push({path: '/newLocation'});
this.$router.push({params: { foo: "bar"}});

我已经检查了一下源代码并注意到这个属性被新对象{}覆盖了.

我想知道params的使用是否超出我的想法？如果没有,怎么用呢？

提前致谢

Answer 1

由于您希望将params传递给相应路径的组件,因此路径对象的path属性应该有一个动态段,:后面跟着params对象中的键名称

所以你的路线应该是

routes: [
    {path: '/newLocation/:foo', name: 'newLocation', component: newComponent}
]

然后以编程方式导航到组件,您应该:

this.$router.push({name: 'newLocation', params: { foo: "bar"}});

看到我使用name的是路线,而不是path您正在通过酒店传递参数params.

如果你想使用path那么它应该是:

this.$router.push({path: '/newLocation/bar'});

通过路径方法,params将自动映射到相应的字段$route.params.

现在,如果您console.log(this.$route.params)在新组件中,您将获得该对象:{"foo": "bar"}

Answer 2

尝试使用查询而不是参数

this.$router.push({path: '/newpath', query : { foo: "bar"}});

在你的组件中

console.log(this.$route.query.foo)

Answer 3

我发现的最简单的方法是使用命名路由和 params 选项。假设您有一个如下所示的路由器文件：

并且您想使用某个 ID 访问“电影”页面。您可以使用 Vue 的路由器链接组件（或 Nuxt 的链接组件）来访问它，如下所示：

视图：

<router-link :to="{ name: 'movie', params: { id: item.id } }">{{ item.title }}</router-link>

下一个：

<nuxt-link :to="{ name: 'movie-id', params: { id: item.id } }">{{ item.title }}</nuxt-link>

请注意，名称参数必须与路由器文件中所需路由的“名称”属性匹配。同样，参数名称必须匹配。

当您创建新页面时，Nuxt 会自动为您创建路由文件。要查看 Nuxt 为其路由提供的名称，请转到项目中的 .Nuxt 文件夹并查找“router.js”文件

Answer 4

将属性绑定到路由器通常不被认为是一种反模式吗？

让它们绑定到它自己的组件是一个更加干燥的解决方案，我实际上相信 Vue 路由器就是这么做的。请参阅： https: //router.vuejs.org/en/essentials/passing-props.html，了解有关最佳实践的更多信息

您可以尝试接受组件的 props: [] 属性中的属性吗？您可以在此处查看如何执行此操作：https://v2.vuejs.org/v2/guide/components.html#Props

如果您有任何疑问，请务必弹出！很高兴能进一步提供帮助。