vue2路由传参方式
时间: 2023-09-19 17:10:21 浏览: 174
Vue二种路由传参的方式和区别
5星 · 资源好评率100%
在Vue 2中,有几种传递路由参数的方式。以下是其中一些常见的方式:
1. 路径参数(Path Parameters):通过在路由路径中添加占位符来传递参数。在定义路由时,可以使用`:`来指定参数名称,然后在实际跳转时,将对应的值填入路径中。例如:
```javascript
// 路由定义
{
path: '/user/:id',
component: User,
}
// 实际跳转
router.push('/user/123');
```
在上述例子中,`:id`是一个占位符,代表要传递的参数名称,可以在`User`组件中通过`$route.params.id`来获取传递的值。
2. 查询参数(Query Parameters):通过在URL中添加查询参数来传递数据。可以使用`query`方法或者`router-link`组件的`to`属性来生成包含查询参数的URL。例如:
```javascript
// query方法
router.push({ path: '/user', query: { id: 123 } });
// router-link组件
<router-link :to="{ path: '/user', query: { id: 123 } }">User</router-link>
```
在上述例子中,传递的参数名称是`id`,可以在`User`组件中通过`$route.query.id`来获取传递的值。
3. 命名路由(Named Routes):给路由命名可以简化路由跳转,并且可以带有参数。首先,在定义路由时,给路由对象添加一个`name`属性。然后,在实际跳转时,使用`name`属性来指定要跳转的路由,并传递参数。例如:
```javascript
// 路由定义
{
path: '/user/:id',
name: 'user',
component: User,
}
// 实际跳转
router.push({ name: 'user', params: { id: 123 } });
```
在上述例子中,通过给路由定义一个`name`属性,可以使用`name`属性来指定要跳转的路由,并通过`params`属性传递参数。在`User`组件中,可以通过`$route.params.id`来获取传递的值。
这些是Vue 2中常用的路由传参方式,根据具体的需求,选择适合的方式来传递参数。
阅读全文