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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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('')
		}
		
	}
}