vue从列表页跳转到详情页后,点浏览器回退到列表页,要保留原来的页码和页数
时间: 2024-03-17 15:40:18 浏览: 21
这个问题可以通过以下两种方式解决:
1. 使用vue-router的路由传参功能,在跳转到详情页时将当前页码和页数作为参数传递,然后在回退到列表页时再通过$route对象获取传递的参数,从而恢复原来的页码和页数。
2. 使用浏览器的历史记录API,将当前页码和页数保存到浏览器的历史记录中,在回退到列表页时再从历史记录中读取保存的页码和页数,从而恢复原来的页码和页数。
具体实现可以参考以下代码片段:
```
// 通过路由传参方式保存页码和页数
// 列表页跳转到详情页
this.$router.push({
path: '/detail',
query: {
page: this.currentPage,
pageSize: this.pageSize
}
})
// 在详情页获取传递的页码和页数
// this.$route.query.page
// this.$route.query.pageSize
// 使用浏览器历史记录API保存页码和页数
// 列表页跳转到详情页
window.history.pushState({
page: this.currentPage,
pageSize: this.pageSize
}, '', '/detail')
// 在列表页回退时从历史记录中读取页码和页数
window.addEventListener('popstate', function(event) {
const state = event.state || {}
const page = state.page || 1
const pageSize = state.pageSize || 10
// 恢复原来的页码和页数
})
```