Vue中$router.push()路由切换及如何传参和获取参数

Vue中$router.push()方法是用来切换路由的，它可以用来实现在单页面应用中不同页面之间的跳转，也可以用来传递参数。下面是如何使用$router.push()方法进行路由切换及参数传递的完整攻略。

1. 基本用法

使用$router.push()方法进行路由切换很简单，只需在方法中传入你想要跳转的目标路由即可。例如，如果你想要从当前路由跳转到名为"home"的路由，可以这样调用$router.push()方法：

this.$router.push('/home');

这个方法会将路由切换到名为"home"的路由，同时也将浏览器的URL改变为"/home"。如果你想要在路由切换时传递参数，可以将参数包含在目标路由的URL中。

2. 传参

参数可以在URL中提供，也可以在调用$router.push()方法的第二个参数中提供。我们可以在URL中使用冒号来标识参数，例如：

{
  path: '/user/:id',
  component: User
}

上面的代码定义了一个动态路由，用户的ID会作为参数传递给User组件。在调用$router.push()方法时，可以使用对象形式的路由进行参数传递，例如：

this.$router.push({ path: '/user/123' })

也可以使用命名路由，并传递参数，例如：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

this.$router.push({ name: 'user', params: { id: 123 }})

上面的代码以命名路由的方式跳转到User组件，并通过params属性传递了一个名为"id"的参数。

3. 获取参数

在路由组件中获取参数非常简单。如果参数是通过path属性传递的，可以通过this.$route.params来获取：

<template>
  <div>{{ $route.params.id }}</div>
</template>

如果参数是通过params属性传递的，可以通过this.$route.params来获取：

<template>
  <div>{{ $route.params.id }}</div>
</template>

4. 示例说明

以下是两个示例，用来说明如何使用$router.push()方法进行路由切换及参数传递：

示例1：使用path传递参数

假设我们有一个商品详情页面，用户可以从该页面跳转到购物车页面，并将商品加入购物车。我们可以通过路由传递商品ID和数量参数，如下所示：

this.$router.push({ path: '/cart/123/2' });

上面的代码将路由切换到名为"cart"的路由，并将商品ID和数量参数传递给该路由。

在购物车页面的组件中，我们可以通过this.$route.params来获取这些参数：

<template>
  <div>
    商品ID：{{ $route.params.id }}
    商品数量：{{ $route.params.amount }}
  </div>
</template>

示例2：使用命名路由和params传递参数

假设我们有一个用户列表页面，用户可以从该页面跳转到某个用户的详情页面。我们可以通过命名路由和params属性传递用户ID参数，如下所示：

this.$router.push({ name: 'user', params: { id: 123 } });

上面的代码将路由切换到名为"user"的路由，并将用户ID参数传递给该路由。

在用户详情页面的组件中，我们可以通过this.$route.params来获取这些参数：

<template>
  <div>
    用户ID：{{ $route.params.id }}
  </div>
</template>

总结

$router.push()方法是Vue Router提供的路由切换方法，它可以用来实现路由跳转及参数传递。在使用$router.push()方法时，我们可以使用path属性或者命名路由的方式指定目标路由，同时可以通过params属性来传递参数，在路由组件中可以通过this.$route.params来获取这些参数。