Vue 路由传参的 3 种基本模式
在 Vue 中，路由传参是连接各个页面的桥梁，而参数在其中扮演着异常重要的角色，决定着两座桥梁是否能够连接成功。在 Vue 路由中，支持 3 种传参方式，即使用 `$router.push` 实现携带参数的跳转、使用路由属性中的 `name` 来确定匹配的路由、使用 `path` 来匹配路由，然后通过 `query` 来传递参数。
方案一：使用 `$router.push` 实现携带参数的跳转
在父组件中，可以使用 `$router.push` 实现携带参数的跳转，例如：
```javascript
getDescribe(id) {
this.$router.push({
path: `/describe/${id}`,
})
}
```
在路由配置中，需要添加 `/:id` 来对应 `$router.push` 中 `path`携带的参数，例如：
```javascript
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
```
在子组件中，可以使用 `$route.params.id` 来获取传递的参数值。
方案二：使用路由属性中的 `name` 来确定匹配的路由
在父组件中，可以使用路由属性中的 `name` 来确定匹配的路由，例如：
```javascript
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
```
在路由配置中，需要将 `path` 设置为 `/describe`，例如：
```javascript
{
path: '/describe',
name: 'Describe',
component: Describe
}
```
在子组件中，可以使用 `$route.params.id` 来获取传递的参数值。
方案三：使用 `path` 来匹配路由，然后通过 `query` 来传递参数
在父组件中，可以使用 `path` 来匹配路由，然后通过 `query` 来传递参数，例如：
```javascript
this.$router.push({
path: '/describe',
query: {
id: id
}
})
```
在路由配置中，需要将 `path` 设置为 `/describe`，例如：
```javascript
{
path: '/describe',
name: 'Describe',
component: Describe
}
```
在子组件中，可以使用 `$route.query.id` 来获取传递的参数值。
需要注意的是，在子组件中获取参数的时候是 `$route.params` 而不是 `$router`，这很重要。
这三种方法都可以实现路由传参，但是需要根据实际情况选择合适的方法。在实际开发中，需要根据项目的需求选择合适的方法来实现路由传参。
