vue3 router.back()带参数
时间: 2023-07-25 11:20:14 浏览: 176
在 Vue3 中,使用 `router.back()` 返回上一个页面时不能直接带参数。但你可以在当前页面中使用 `router.push()` 传递参数,然后在上一个页面中通过 `route.query` 获取参数。
例如,在当前页面中使用以下代码跳转到上一个页面:
```
router.push({ path: router.history.current.fullPath, query: { param: 'value' }})
```
然后在上一个页面中使用以下代码获取参数:
```
this.$route.query.param
```
注意,`router.push()` 会增加一条新的历史记录,如果你希望在返回上一个页面时直接带参数,可以考虑使用 `router.replace()` 替换当前页面的历史记录。
相关问题
vue3 router.back() 携带参数
你可以使用 `router.go(-1)` 实现返回上一页,并且在路由跳转时通过 `query` 或 `params` 传递参数。例如:
```javascript
// 在当前路由中跳转到下一页,并携带参数
this.$router.push({ path: '/next-page', query: { key: value } })
// 返回上一页,并携带参数
this.$router.go(-1, { query: { key: value } })
```
在被返回的页面中,你可以通过 `$route` 对象获取传递的参数。例如:
```javascript
// 获取 query 参数
const queryParam = this.$route.query.key
// 获取 params 参数
const paramsParam = this.$route.params.key
```
其中,`query` 适用于传递字符串类型的参数,而 `params` 适用于传递数字或字符类型的参数。
this.$router.back带参数
对于使用Vue.js的项目,可以使用this.$router.back()方法来返回上一页。但是该方法没有直接支持传递参数的功能。
如果你想要在返回上一页的同时传递参数,你可以通过以下几种方法实现:
1. 使用路由的query参数:你可以在路由跳转时通过query参数传递数据,在返回上一页时再从路由中获取数据。例如:
在当前页面跳转时:
```javascript
this.$router.push({ path: '/previous-page', query: { data: 'your data' } })
```
在返回上一页时获取数据:
```javascript
const data = this.$route.query.data
```
2. 使用路由的state参数:你可以在路由跳转时通过state参数传递数据,在返回上一页时再从路由中获取数据。例如:
在当前页面跳转时:
```javascript
this.$router.push({ path: '/previous-page', state: { data: 'your data' } })
```
在返回上一页时获取数据:
```javascript
const data = this.$route.state.data
```
请注意,这些方法只能在使用Vue Router进行路由管理的情况下使用。同时,返回上一页时,需要确保上一页的路由路径存在,否则将无法返回上一页。