vue3实现点击跳回到上次进来的页面并携带参数
时间: 2024-04-16 09:27:48 浏览: 74
你可以使用`$router.go(-1)`方法来实现点击跳回到上次进来的页面,并携带参数的话,可以使用`query`或者`params`来传递参数。
首先,在你要跳转的页面中,使用`$router.push`方法跳转到目标页面,并在`query`或者`params`中传递参数。例如:
```javascript
// 在当前页面跳转到目标页面,并携带参数
this.$router.push({
path: '/target',
query: {
param1: 'value1',
param2: 'value2'
}
})
```
然后,在目标页面中,通过`$route.query`或者`$route.params`来获取传递过来的参数。例如:
```javascript
// 在目标页面获取参数
console.log(this.$route.query.param1) // 输出 'value1'
console.log(this.$route.query.param2) // 输出 'value2'
```
最后,在目标页面中,通过`$router.go(-1)`方法实现点击返回到上次进来的页面。例如:
```javascript
// 点击返回到上次进来的页面
goBack() {
this.$router.go(-1)
}
```
当你在目标页面中调用`goBack()`方法时,就会返回到上次进来的页面,并且之前传递的参数也会保留。
相关问题
VUE3 页面跳转携带参数
在 Vue3 中,可以使用 `router.push` 方法进行页面跳转,并且可以通过第二个参数传递参数。例如:
```javascript
// 在当前页面跳转到 /target 页面,并携带参数 id=123
router.push({ path: '/target', query: { id: 123 }})
```
在目标页面中,可以通过 `$route.query` 获取传递的参数。例如:
```javascript
// 获取参数 id 的值
const id = $route.query.id
```
vue3跳转页面携带参数
在Vue3中,可以通过params和query两种方式来跳转页面并携带参数。
1. 使用params进行传参:
在需要跳转的页面,可以使用router.push方法来进行跳转,并在params对象中传入参数。例如:
```javascript
function acty() {
router.push({ name: 'tiaozhn', params: { id: "aaa" } })
}
```
在接收参数的页面,可以通过route.params来获取传递的参数。例如:
```javascript
console.log(route.params.id);
```
这样就可以获取到传递的参数值。
2. 使用query进行传参:
在需要跳转的页面,可以使用router.push方法来进行跳转,并在query对象中传入参数。例如:
```javascript
const methodClick = (data) => {
let paramValue = data.deviceCode
router.push('/equipment/operation?deviceCode=' + paramValue)
}
```
在接收参数的页面,可以通过route.query来获取传递的参数。例如:
```javascript
onMounted(() => {
if (route.currentRoute.value.query.deviceCode) {
state.codeDevice2 = route.currentRoute.value.query.deviceCode
}
})
```
这样就可以获取到传递的参数值。
需要注意的是,在接收参数的页面,需要先引入useRoute或useRouter来获取route对象,然后通过route.params或route.query来获取参数值。
#### 引用[.reference_title]
- *1* [VUE3 跳转传参的三种方式](https://blog.csdn.net/qq_54602808/article/details/119789250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Vue3.0路由跳转携带参数](https://blog.csdn.net/renfeideboke/article/details/129120530)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)