vuejs2 - 如何使用 vue-router 参数

Question

我是 vue 的新手，现在正在使用它的路由器。
我想导航到另一个页面，并使用以下代码:

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 对象中的键名

所以你的路线应该是

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"}