vue 详情页返回列表,过滤查询条件保留

项目场景:

在列表页进行的条件查询出来的数据,点击查看详情之后,再返回,之前的查询条件会清空,如何不清空?

在这里插入图片描述

思路

在点击查看的时候,保留查询的条件,等返回的时候,把条件给查询框中的值。这个地方多出用到,所有需要采用vuex,这样更方便。。。每个页面在离开之前,保留查询条件在vuex中,从详情页回来的时候,再把查询条件给赋值到input中

vuex中的写法:这个项目中的vuex是一个modules,在modules中新建文件。
在这里插入图片描述
引入到index中注册全局的store
在这里插入图片描述
列表中这样写:
1.点击查询的时候,设置isFilters为ture,
2.根据查询的条件,点击查看的时候,触发vuex的存储事件,存查询的参数到vuex。
3.从详情返回列表的时候,把vuex中的参数给赋值到列表上的查询条件框中。
4.在列表页上,加上一个混入的方法。
5.点击重置的时候,清空vuex中的值。
在这里插入图片描述
在这里插入图片描述
混入的代码如下:(单独的文件)

// 用来判断是否是从详细页过来的路径
const filterParamsMixin = {
  beforeRouteEnter(to, from, next) {
    //在路由加载进入之间,如果不是从当前详情页返回进入列表页的话,则将缓存中的pageNum和pageSize清除
    const toFullPath = to.fullPath
      .split('/')
      .filter((v, i) => i < 3)
      .join('')
    const fromFullPath = from.fullPath
      .split('/')
      .filter((v, i) => i < 3)
      .join('')
  
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值