vuerouter.push传参

Vue-router 是 Vue.js 官方提供的路由管理插件，它可以实现 SPA（Single Page Application）单页面应用的路由功能。在 Vue-router 中，我们可以使用 `router.push` 方法进行路由跳转，并且还可以传递参数。

在 Vue-router 中，路由跳转可以使用 `router-link` 组件或者编程式导航（即使用 `router.push` 方法）两种方式。相比于 `router-link` 组件，使用 `router.push` 方法可以更加灵活地在代码中进行路由跳转，并且可以传递参数。

`router.push` 方法的基本语法如下：

```

router.push(location

onComplete?

onAbort?)

```

其中，`location` 参数指定了要跳转的目标路由，可以是字符串路径或者一个描述地址的对象。`onComplete` 和 `onAbort` 都是可选参数，用于在导航完成或者中断时进行回调。

传递参数可以通过两种方式：URL 参数和查询参数。

1. URL 参数：URL 参数是指将参数直接加在路由路径上，形成动态路由。例如，我们可以定义一个动态的用户详情页路由 `'/user/:id'`，其中 `:id` 就是一个动态参数。使用 `router.push` 方法进行跳转时，可以通过将参数直接拼接在路径中实现参数的传递。例如：

```javascript

// 跳转到用户详情页，并传递 id 参数

router.push('/user/' + userId)

```

2. 查询参数：查询参数是指将参数添加到 URL 中的查询字符串中，形成查询参数。查询参数以 `?` 开头，参数之间使用 `&` 进行连接。使用 `router.push` 方法进行跳转时，可以通过将参数定义在 `query` 字段中实现参数的传递。例如：

```javascript

// 跳转到用户详情页，并传递 id 参数

router.push({

path: '/user'

query: { id: userId }

})

```

在接收参数的页面，可以通过 `$route.params` 或者 `$route.query` 来获取参数值。例如：

```javascript

// 获取 URL 参数

const id = this.$route.params.id

// 获取查询参数

const id = this.$route.query.id

```

需要注意的是，URL 参数只能在定义路由时指定，而查询参数可以在任何地方进行传递，并且查询参数可以传递多个键值对参数。

综上所述，Vue-router 的 `router.push` 方法可以很方便地进行路由跳转，并且还可以传递参数。通过合理的使用路由跳转和参数传递，我们可以更加灵活地控制页面之间的跳转和数据传递。