this.$router传参
时间: 2023-10-19 10:34:16 浏览: 44
this.$router传参是指在Vue.js中使用Vue Router进行页面导航时,可以通过路由对象($router)来传递参数。一般情况下,可以在路由的路径中使用动态参数来传递参数,也可以通过query参数或者params参数来传递参数。
1. 动态参数:
在定义路由时,可以在路由的路径中使用冒号(:)来指定动态参数,例如:
```javascript
{
path: '/user/:id',
component: User,
props: true
}
```
然后,可以使用$router对象的push或者replace方法来跳转到带有参数的路径,例如:
```javascript
this.$router.push('/user/123');
```
在接收参数的组件中,可以通过props选项来接收参数:
```javascript
props: ['id'],
```
然后就可以在组件内部使用this.id来获取传递过来的参数。
2. query参数:
通过query参数传递参数时,可以在$router对象的push或者replace方法中传递一个包含query参数的对象,例如:
```javascript
this.$router.push({ path: '/user', query: { id: '123' }});
```
在接收参数的组件中,可以通过$route对象的query属性来获取参数:
```javascript
this.$route.query.id
```
3. params参数:
通过params参数传递参数时,可以在$router对象的push或者replace方法中传递一个包含params参数的对象,例如:
```javascript
this.$router.push({ path: '/user', params: { id: '123' }});
```
在接收参数的组件中,可以通过$route对象的params属性来获取参数:
```javascript
this.$route.params.id
```
需要注意的是,动态参数、query参数和params参数的使用场景有所不同,选择适合自己需求的方式来传递参数。