vue2路由跳转携带参数
时间: 2023-10-13 16:22:18 浏览: 135
在Vue2中,可以通过以下方式在路由跳转时携带参数:
1. 使用$router.push方法
在组件中使用$router.push方法进行路由跳转时,可以在第二个参数中传递一个对象,用来携带参数。例如:
```javascript
this.$router.push({
path: '/target',
query: {id: 123}
})
```
在目标页面中可以通过this.$route.query获取参数值。
2. 使用$route.push方法
在方法中使用$route.push方法进行路由跳转时,也可以在第二个参数中传递一个对象,用来携带参数。例如:
```javascript
this.$route.push({
path: '/target',
query: {id: 123}
})
```
同样地,在目标页面中可以通过this.$route.query获取参数值。
3. 使用$route.params方法
如果参数是在路由路径中定义的,可以使用$route.params方法获取参数值。例如:
```javascript
// 定义路由
{
path: '/target/:id',
component: TargetComponent
}
// 跳转路由
this.$router.push('/target/123')
// 获取参数
this.$route.params.id // 123
```
注意,使用$route.params方法获取参数值时,参数名称必须与路由路径中定义的名称相同。
阅读全文