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

最新推荐文章于 2024-06-26 09:37:28 发布

Lele___

最新推荐文章于 2024-06-26 09:37:28 发布

阅读量1.6k

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/Lele___/article/details/115524304

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一种在Vue.js应用中实现列表页面按查询条件刷新的方法。通过定义一个混入（mixin），在创建和挂载组件时检查session存储的查询条件。如果存在，会根据这些条件重新请求数据并渲染列表。在跳转到新增或编辑页面之前，会保存当前的查询条件。当操作完成后，返回列表页面时，会带有之前的查询条件进行刷新。这种方法避免了全局混入，确保只有需要的页面才会进行条件刷新。

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

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