我是 vue 的新手，现在正在使用它的路由器。 我想导航到另一个页面，我使用以下代码：
this.$router.push({path: '/newLocation', params: { foo: "bar"}});
然后我希望它在新组件上
this.$route.params
这不起作用。 我也试过了：
this.$router.push({path: '/newLocation'});
this.$router.push({params: { foo: "bar"}});
我稍微检查了源代码，发现这个属性被新对象 {} 覆盖。
我想知道参数的使用是否与我想的不同？ 如果没有，如何使用？
提前致谢
【问题讨论】：
标签： vuejs2 vue-router
由于您想将参数传递给相应路由的组件，因此您路由对象的路径属性应该有一个由: 表示的动态段，后跟参数对象中的键名
所以你的路线应该是
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'});
通过路径方法，参数将自动映射到$route.params上的相应字段。
现在，如果您在新组件中console.log(this.$route.params)，您将获得对象：{"foo": "bar"}
【讨论】：
props: true 才能开始解析 url 的 :foo 部分
我发现最简单的方法是使用命名路由和参数选项。假设您有一个如下所示的路由器文件：
并且您想使用一些 ID 访问“电影”页面。您可以使用 Vue 的路由器链接组件（或 Nuxt 的链接组件）来访问它：
Vue：
<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>
注意，name 参数必须与路由器文件中所需路由的“name”属性相匹配。同样，参数名称必须匹配。
Nuxt 在你创建一个路由文件时会自动为你创建一个路由文件 新页面。要查看 Nuxt 为其路线命名的名称，请转到 .Nuxt 在项目中的文件夹中查找“router.js”文件
【讨论】：
尝试使用查询而不是参数
this.$router.push({path: '/newpath', query : { foo: "bar"}});
在你的组件中
console.log(this.$route.query.foo)
【讨论】：
http://...?player=%5Bobject%20Object%5D。有什么办法不让它这样做？
%5Bobject%20Object%5D
将属性绑定到路由器不是通常被认为是一种反模式吗？
让它们绑定到它自己的组件是一个更加 DRY 的解决方案，我实际上相信 Vue 路由器会这样做。请参阅：https://router.vuejs.org/en/essentials/passing-props.html，了解更多关于最佳实践的信息
您可以尝试接受组件的 props: [] 属性中的属性吗？你可以在这里看到如何做到这一点：https://vuejs.org/v2/guide/components.html#Props
如果您有任何问题，请务必弹出！很乐意为您提供进一步帮助。
【讨论】：