vue带着查询条件刷新父页面，跳转页面保存查询条件，操作成功跳转回父页面

迷南。 2022-11-17 05:17 226阅读 0赞

## VUE点击页面跳转，跳回页面后带条件刷新 ##

> 需求：在列表页面根据查询条件请求后台接口获取数据，获取到数据后重新渲染列表，点击按钮 新增或编辑列表中的某一条数据，跳转到新增/编辑页面，操作成功后，页面跳转到列表页面且带着查询条件重新请求后台接口。  
> 实现思路：  
> 定义混入：混入提供一个方法将查询条件存储到缓存中，初始化时请求获取数据的接口，判断缓存中是否存在查询条件，如果存在调用获取数据接口时传递查询参数，不存在直接调用获取数据接口。  
> 不使用全局混入的原因是不是每个页面都需要带条件刷新。

### 定义混入 ###

export default { 
      created() { 
      // 从session中取出页面跳转前保存的查询条件
        let searchObj = this.$session.get('searchObject');
        if (searchObj) { 
          let {  searchQuery, isBack } = searchObj;
          if (!!isBack && searchQuery) { 
            // 缓存中存在 将缓存中的查询条件赋值给组件
            this.searchQuery = searchQuery; 
            // 调用后台接口获取数据
            this.getList();
     		// 清空缓存中查询条件
            this.$session.remove("searchObject");
          }
        }
      },
      methods: { 
      	// 页面跳转前调用方法 加查询条件放入缓存
        saveSearchQuery(params) { 
          this.$session.set("searchObject", { 
            ...params
          });
        }
      },
      mounted() { 
      	//获取组件中的请求后台接口方法
        const getList= this.getList
      }
    }

*  在组件中使用  
    引入mixin：

import searchRefresh from "../../mixin/searchRefresh";

使用mixin:

export default { 
    	data(){ 
    		return { 
    			// 存储查询条件
    			searchQuery:{ }
    		}
    	},
    	// 使用混入
    	mixins: [searchRefresh],
    	methods:{ 
    		getList(){ 
    			// 调用后台接口获取数据
    		},
    		update(){ 
    			// 跳转到修改页面，跳转页面前，先将查询条件保存到缓存中
    			this.saveSearchQuery({ 
    		        searchQuery: this.searchQuery,
    		        //用来标识是否需要带条件刷新页面
    		        isBack: true,
    		        func: this.getList,
    	        });		
    	        //跳转页面
    	        this.$router.push('')
    		}
    		
    	}
    }