vue2 element 实现表格点击详情，返回时保留查询参数

先���观一点，上图

列表共5条数据，准备输入Author过滤条件进行查询

进入查看详情页，就随便搞了个按钮，将就看吧

点击返回后

一开始准备用vuex做这个功能，后来放弃了，想到直接用路由去做可能也不错。有时间再整一套vuex版的，也很简单

                                                                                                                                查询          重置                                    {{ scope.$index }}                    {{ scope.row.title }}                              {{ scope.row.author }}                            {{ scope.row.pageviews }}                              {{ scope.row.status }}                                                {{ scope.row.display_time }}                                      查看          编辑                    import { getList } from '@/api/table'// import { createNamespacedHelpers } from 'vuex'// const { mapMutations, mapActions } = createNamespacedHelpers('queryParams')export default {  filters: {    statusFilter(status) {      const statusMap = {        published: 'success',        draft: 'gray',        deleted: 'danger'      }      return statusMap[status]    }  },  beforeRouteEnter(to, from, next) {    // console.log('beforeRouteEnter:', from);      /**       * 官方文档是这样写明的：       * -- start --       * beforeRouteEnter 守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。       * 不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数       * beforeRouteEnter (to, from, next) {          next(vm => {            // 通过 `vm` 访问组件实例          })        }      * -- end --      * 重点是第二句话,说明是有方法给组件实例修改值的      */          /** 有问题的写法       * const data = { testMsg: '测试信息'}       * const saveData = data       * next(vm => {       * 在这里卡了很久，这样写的话，组件created抑或mounted里，可以访问data的属性，但却拿不到beforeRouteEnter中定义的属性       *  //vm.saveData = saveData       *  //vm.$set(vm, 'saveData', saveData)       *        * })       *        * 执行顺序：       * beforeRouteEnter       * beforeCreate       * mounted       * vm       */// 有效处理    let obj = {}    if (from.name == 'itemDetail') {      obj = from.params    } else {      obj = {}    }    next(vm => {      /**       * 在这里卡了很久后，尝试将设置value写入methods方法中使用vm来调用，       * mounted拿不到beforeRouteEnter这里定义的变量，但是它可以访问vm实例的变量和方法       * 再将beforeRouteEnter这定义的对象作为函数参数       */       vm.setFilterParams(obj)    })  },  data() {    return {      list: null,      listLoading: false,      queryParams: {        author: '',        status: ''      },    }  },  created(){    this.fetchData()  },  mounted() {    // if (    //   Object.keys(this.$store.state.queryParams.filterParams).length === 0    // ) {    //   this.queryParams = {    //     // pageNum: 1,    //     // pageSize: 10,    //     author: '',    //     status: ''    //   };    // } else {    //   this.queryParams = JSON.parse(    //     JSON.stringify(this.$store.state.queryParams.filterParams)    //   );    // }  },  methods: {    // ...mapActions(["filterCache"]),    setFilterParams(obj) {      this.queryParams = Object.assign({},obj)      this.fetchData()    },    fetchData() {      this.listLoading = true      let queryParams = this.queryParams      getList(queryParams).then(response => {        this.list = response.data.items        this.listLoading = false      })    },    // 查看    doView(row) {      this.$router.push({        /* path与params不可同时出现 */        // path: 'table/itemDetail',        name: 'itemDetail',        params: this.queryParams      })    },    // 查询    onSubmit() {      // this.$store.dispatch("queryParams/filterCache", this.queryParams);      // this.filterCache(this.queryParams)      this.fetchData()    },    reset() {      this.queryParams = {}      this.fetchData()    }  }}

上面重点部分就是beforeRouteEnter了：

beforeRouteEnter(to, from, next) {    // console.log('beforeRouteEnter:', from);      /**       * 官方文档是这样写明的：       * -- start --       * beforeRouteEnter 守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。       * 不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数       * beforeRouteEnter (to, from, next) {          next(vm => {            // 通过 `vm` 访问组件实例          })        }      * -- end --      * 重点是第二句话,说明是有方法给组件实例修改值的      */          /** 有问题的写法       * const data = { testMsg: '测试信息'}       * const saveData = data       * next(vm => {       * 在这里卡了很久，这样写的话，组件created抑或mounted里，可以访问data的属性，但却拿不到beforeRouteEnter中定义的属性       *  //vm.saveData = saveData       *  //vm.$set(vm, 'saveData', saveData)       *        * })       *        * 执行顺序：       * beforeRouteEnter       * beforeCreate       * mounted       * vm       */// 有效处理    let obj = {}    if (from.name == 'itemDetail') {      obj = from.params    } else {      obj = {}    }    next(vm => {      /**       * 在这里卡了很久后，尝试将设置value写入methods方法中使用vm来调用，       * mounted拿不到beforeRouteEnter这里定义的变量，但是它可以访问vm实例的变量和方法       * 再将beforeRouteEnter这定义的对象作为函数参数       */       vm.setFilterParams(obj)    })  },

在这里插入代码片

      返回  export default {  name: 'itemDetail',  data() {    return {    }  },  created() {    // console.log(this.$route);  },  methods: {    handleClick() {    /**       * go(-1): 原页面表单中的内容会丢失；       * this.$router.go(-1)：后退+刷新；       * this.$router.go(0)：刷新；       * this.$router.go(1) ：前进       *        * back(): 原页表表单中的内容会保留；在返回界面传递参数；       * this.$router.back():后退 ；       * this.$router.back(0) 刷新；       * this.$router.back(1)：前进       *        */      this.$router.back()    }  },  watch: {  }}