如何使用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"}});

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

我想知道参数的使用是不是和我想的不一样？如果不是，如何使用？

提前感谢

Answer 1

由于要将参数传递给相应路径的组件，因此路径对象的路径属性应具有由:表示的动态段，后跟参数对象中键的名称

所以你的路线应该是

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选项。假设您有一个如下所示的路由器文件：

​

​

你可以使用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>

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

当您创建新页面时，

Nuxt会自动为您创建路由文件。要查看Nuxt为其路由指定的名称，请转到项目中的.Nuxt文件夹并查找"router.js“文件