router怎么携带参数跳转
时间: 2023-10-10 12:10:21 浏览: 27
在Vue中,你可以使用Vue Router来进行路由跳转并携带参数。以下是一个示例:
首先,在定义路由时,你可以在路由路径中使用动态,例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'User',
component: UserComponent
}
]
})
```
在上述示例中,`:id` 表示一个动态参数,可以在跳转时传入不同的值。
接下来,在组件中,你可以使用`this.$router.push()` 方法进行路由跳转,并通过`params`选项传递参数。示例如下:
```javascript
// 在组件中
methods: {
goToUser(id) {
this.$router.push({ name: 'User', params: { id: id }});
}
}
```
在上述示例中,`goToUser` 方法通过 `this.$router.push()` 跳转到名为 `User` 的路由,并通过 `params` 选项传递了一个名为 `id` 的参数。
在目标组件中,你可以通过 `$route.params` 来获取传递的参数。示例如下:
```javascript
// 在目标组件中
mounted() {
const userId = this.$route.params.id;
// 使用 userId 进行相应的操作
}
```
在上述示例中,`mounted` 钩子函数中通过 `this.$route.params.id` 获取了传递的参数值。
希望这个例子能帮助你理解如何在Vue Router中携带参数进行路由跳转!