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

最新推荐文章于 2024-04-17 16:15:03 发布

sika-master

最新推荐文章于 2024-04-17 16:15:03 发布

阅读量3.6k

点赞数

本文链接：https://blog.csdn.net/weixin_42150719/article/details/125190258

版权

本文介绍了在Vue.js项目中，如何在详情页返回列表时保留过滤查询条件。通过使用Vuex模块，当点击查询时将isFilters设为true，并将查询参数存储到Vuex。在详情页回退时，将Vuex中的参数赋值给列表查询条件。同时，列表页添加混入方法以重置查询条件，避免在created中初始化时获取不到筛选数据。文中提供了一个混入代码示例，简化了原本在详情页需要重复编写的过程。

摘要由CSDN通过智能技术生成

项目场景：

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

在这里插入图片描述

思路

在点击查看的时候，保留查询的条件，等返回的时候，把条件给查询框中的值。这个地方多出用到，所有需要采用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) =>