举例实现点击返回上次进来的页面时携带参数功能
时间: 2023-11-28 16:04:29 浏览: 34
当你点击返回到上次进来的页面时,可以使用`$router.replace`方法替换当前路由,并在`query`中传递参数。以下是一个示例:
```javascript
// 在当前页面返回到上次进来的页面,并携带参数
goBackWithParams() {
this.$router.replace({
path: this.$route.query.from, // from参数指定了上次进来的页面路径
query: {
...this.$route.query, // 保留原来的query参数
param1: 'value1', // 添加新的参数
param2: 'value2'
}
})
}
```
在这个示例中,我们通过`this.$router.replace`方法将当前路由替换为上次进来的页面,并在`query`中传递参数。使用`...this.$route.query`将保留原来的query参数,然后添加新的参数。
请确保在点击返回按钮或者触发返回操作时调用`goBackWithParams()`方法。这样,当你返回到上次进来的页面时,之前传递的参数也会携带过来。
在上次进来的页面中,你可以通过`this.$route.query.param1`和`this.$route.query.param2`来获取传递过来的参数。记得先检查参数是否存在,然后再进行处理。
```javascript
// 在上次进来的页面获取参数
created() {
if (this.$route.query.param1 && this.$route.query.param2) {
console.log(this.$route.query.param1) // 输出 'value1'
console.log(this.$route.query.param2) // 输出 'value2'
}
}
```
这样,当你点击返回到上次进来的页面时,参数值会被正确地携带过来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)