VUE页面跳转后保留跳转前的筛选条件和页码

895 阅读1分钟

需求

列表页面统一调用相同页码组件,页码跳转仅在当前页刷新接口数据,此时点击某条数据详情,再回退到列表页后,页码及筛选条件没有保存。

思路

将筛选条件和页码参数封装在一个对象里,改变时用$router.replace(‘当前路径’, 参数对象)来改变路径,将参数放在路径上。

需要注意的是传参时对象会被转为字符串,所以需要用到JSON.stringfy()来包裹传参,用JSON.pase()来解析接收到的参数。

主要代码

this.$router.replace({path: '/screening/assess', query: {pageParameter: JSON.stringify(this.parameter)}})

this.parameter = JSON.parse(this.$route.query.pageParameter)

其他

push和replace区别

$router.push({path:'home'})向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录

$router.replace({path:'home'});替换路由,没有历史记录,点击返回,跳转到上上一个页面