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'});

通过路径方法，参数将自动映射到$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的链接组件）来达到此目的：

Vue：

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

Nuxt：

<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://vuejs.org/v2/guide/components.html#Props

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