怎么样实现跳转页面后,点击返回,仍然保留表格原来的筛选条件?

1.需求说明

要求:跳转页面后点击返回,仍然保留表格的筛选条件:搜索值、页码、每页几条。

操作表格数据后,点击返回后仍然保留原来的查询条件

  1. 页面中有搜索框、表格、分页 3 个组件
  2. 表格每条数据有操作列,例如:点击 详情,就会跳转到另一个页面
  3. 表格数据筛选条件为:搜索值 + 当前页码 + 每页几条数据

页面大概长这样:

在这里插入图片描述

2.实现的步骤

  1. 该页面创造时从 sessionStorage 中读取先前保存的 筛选条件
  2. 如果该 筛选条件 存在就把它取出来,作为查询条件
  3. 该页面被销毁前保留 筛选条件 到 sessionStorage

第一步:该页面创造时从 sessionStorage 中读取先前保存的 筛选条件

 // 大家无需关心变量名称,只需观察中文注释即可
 
created() {
    // 1、获取之前的查询条件(需要JSON.parse()将其转为对象)
    const searchCondition = JSON.parse(window.sessionStorage.getItem('searchCondition'))
    if (searchCondition) {
        // 2、若存在,则覆盖初始查询条件
        this.condition = searchCondition.searchValue // 这里是搜索框的值
        this.pagination = Object.assign(this.pagination , searchCondition.searchPage) // 这里包含 当前页码 和 每页几条
    }
    this.getTableList() // 这里是查询数据的函数
},

第二步:它在 sessionStorage 中大概长这样

在这里插入图片描述

第三步:该页面被销毁前保留 筛选条件 到 sessionStorage

beforeDestroy() {
    // 1、设置搜索条件
    const searchCondition = {
        searchValue: this.condition, // 这是当前的搜索值
        searchPage: {
            current: this.pagination.current, // 这是当前的页码
            limit: this.pagination.limit // 这是当前的每页几条
        }
    }
    // 2、把它存储到 sessionStorage (使用JSON.stringify()将其转化为字符串)
    window.sessionStorage.setItem('searchCondition', JSON.stringify(searchCondition))
}

到此为止已经实现了:跳转页面后再返回,仍然保留查询条件。
如果还想要判断从哪个页面进来的,可以结合路由守卫的 from , to 判断是否触发条件回显。

  • 7
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
在使用Vuex实现页面跳转时,需要保持原来筛选条件,可以通过以下步骤实现: 1. 在Vuex的store中定义一个全局状态对象,该对象用于存储筛选条件。 2. 在筛选条件发生变化时,将新的条件值存储到该全局状态对象中。 3. 在跳转页面前,获取全局状态对象中的筛选条件值。 4. 在目标页面中,在页面加载完成后,通过读取全局状态对象中的筛选条件值,来初始化页面的筛选条件。 5. 在页面组件中使用计算属性或getter方法,从Vuex的全局状态对象中获取筛选条件值,并应用到相应的组件方法中。 以下是一个示例代码,以帮助理解上述步骤: 1. 在Vuex的store.js文件中: ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { filterConditions: {}, // 存储筛选条件的全局状态对象 }, mutations: { updateFilterConditions(state, conditions) { // 更新筛选条件的mutation state.filterConditions = conditions; }, }, }); ``` 2. 在筛选页面组件中: ```javascript import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(['updateFilterConditions']), applyFilterConditions() { // 将新的筛选条件存储到全局状态对象中 this.updateFilterConditions({ // 筛选条件相关属性和值 }); // 导航到另一个页面 this.$router.push('/目标页面'); }, }, } ``` 3. 在目标页面组件中: ```javascript import { mapState } from 'vuex'; export default { computed: { ...mapState(['filterConditions']), filteredData() { // 使用筛选条件来处理数据 // 在此处应用筛选条件到数据,以获取符合条件的filteredData }, }, created() { // 初始化目标页面时,获取全局状态对象中的筛选条件,并使用它们来初始化页面的筛选条件 this.initializeFilterConditions(); }, methods: { initializeFilterConditions() { // 读取筛选条件,根据需要初始化页面的筛选条件 // 例如:this.filter = this.filterConditions.filter; }, }, } ``` 通过以上步骤,我们可以在使用Vuex实现页面跳转时,保持原来筛选条件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值