ant-design-vue-jeecg路由传输参数

目录

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

问题描述、需求描述

需求描述：进入到主查询页面，根据查询条件查询数据，点击某个数据列打开新的页面展示详情，点击详情页的返回按钮、跳回上级页面并把查询条件回显并执行;

1. 主页面和详情页面 之间使用的方式路由的方式跳转；
2. 下面是主页面跳转详情页的代码块：

   gotoFb(r) {
       this.$router.push({
         name: 'OperationColumnsList',
         params: {
           eventId: r.id
           }
       })
     }
   

3. 详情页返回主页面的代码如下：

   back() {
   this.$router.push({
     name: 'workbench-WorkbenchList',
   })
   }
   

解决方案

使用路由参数传递到详情页面并接收，代码如下：

   back() {
     this.$router.push({
       name: 'workbench-WorkbenchList',
       params: {
         cQueryParam: this.$route.params.fQueryParam,
         cTime: this.$route.params.fTime
       }
     })
   },

最后在于 主页面的 create方法里面捕获参数：

created() {
   const that = this
   //  获取 返回页面的 查询条件
   if(this.$route.fullPath === '/workbench/WorkbenchList'){
     if(this.$route.params.cQueryParam === undefined){
       this.queryParam = {
         sysOrgCode: '',
         rwzt: ''
       };
       this.time = [];
     }else{
       this.queryParam = this.$route.params.cQueryParam;
       this.time = this.$route.params.cTime;
     }
   }
   that.searchQuery();
 },

这个 searchQuery()不能使用JeecgListMixin.js中封装的，需要重写一下代码（两个方法），如下：

searchQuery(arg, url) {
     this.queryParam.pageNo = this.ipagination.current
     this.queryParam.pageSize = this.ipagination.pageSize
     //加载数据 若传入参数1则加载第一页的内容
     if (arg === 1) {
       this.ipagination.current = 1
     }
     // 获取浏览器地址的参数，拼接到查询params中
     this.loading = true
     getAction(this.url.list, this.queryParam).then(res => {
       if (res.success) {
         //console.log("loadData::::::::::::::::",res.result.records)
         this.dataSource = res.result.records || res.result
         this.ipagination.total = res.result.total
       }
       if (res.code === 510) {
         this.$message.warning(res.message)
       }
       this.loading = false
     })
   },
   handleTableChange(pagination) {
     //分页、排序、筛选变化时触发
     //TODO 筛选
     this.ipagination = pagination
     this.searchQuery()
   },

handleTableChange是分页的方法、searchQuery就是重写的查询方法。

需要注意的是 param和query参数的写法使用的路由名字写法不太一样。