vue中如何接收前一个页面this.$router.push中的参数
时间: 2024-04-24 21:25:35 浏览: 194
在Vue中,可以通过路由传参的方式将参数传递给下一个页面。如果你使用`this.$router.push`方法进行页面跳转,可以通过`query`或`params`来传递参数。
1. 通过`query`传递参数:
在前一个页面使用`this.$router.push`方法时,将参数作为对象的属性添加到`query`中,例如:
```
this.$router.push({
path: '/nextPage',
query: {
param1: 'value1',
param2: 'value2'
}
})
```
在后一个页面中可以通过`this.$route.query`来获取参数:
```
created() {
console.log(this.$route.query.param1) // 输出 'value1'
console.log(this.$route.query.param2) // 输出 'value2'
}
```
2. 通过`params`传递参数:
在前一个页面使用`this.$router.push`方法时,将参数作为对象的属性添加到`params`中,例如:
```
this.$router.push({
path: '/nextPage',
params: {
param1: 'value1',
param2: 'value2'
}
})
```
在后一个页面中可以通过`this.$route.params`来获取参数:
```
created() {
console.log(this.$route.params.param1) // 输出 'value1'
console.log(this.$route.params.param2) // 输出 'value2'
}
```
注意:使用`query`传递参数时,参数会以查询字符串的形式出现在URL中,而使用`params`传递参数时,参数会以路径参数的形式出现在URL中。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)