Vue单页应用路由返回参数记忆处理方式（推荐）

背景

目前很多应用都是单页应用的开发模式，关于路由返回记录上次查询条件或结果的实现方式都大同小异，各有各的实现方法，导致不同项目看起来都很乱，甚至于同一个项目不同终端使用不同的方式去实现，所以需要把这样的功能给插件化，以及代码规范化起来，能让开发者更方便的更改，及阅读。

实现思路

• 规范化生命周期

• • $backEnter(data)：子页面返回进入，传入记录的参数
  • $backOther()：其它页面进入，无参数
  • $backLeave() { return {...} }：页面离开，返回需要记录的参数

• 监听 VueRouter 的路由进入及离开方法

• • vm.beforeRouteLeave(to, from, next)：页面离开
  • vm.beforeRouteEnter(to, from, next)：页面进入

• 通过 VueMixin 注入代码
• 存储 表单参数 通过 SessionStorage 来存储避免不同应用标签数据混淆

插件代码

# mixin/backStorage.js

const Storage = window.sessionStorage;
const SetRouteParam = function (routers = []) {
  return {
    // 离开列表进入详情 缓存参数
    beforeRouteLeave(to, from, next) {
      if (routers?.includes(to.name)) {
        const params = this.$backLeave ? this.$backLeave(to, from, routers) : {};
        Storage.setItem(`${from.name}Params`, JSON.stringify(params));
      } else {
        Storage.removeItem(`${from.name}Params`);
      }
      next();
    },
    // 不是从详情进入当前列表  清除缓存
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 判断来源是详情的就把缓存的参数赋值给当前列表
        if (routers?.includes(from.name)) {
          try {
            vm.$backEnter && vm.$backEnter(JSON.parse(Storage.getItem(`${to.name}Params`)));
          } catch (error) {
            vm.$backOther && vm.$backOther();
          }
        } else {
          Storage.removeItem(`${to.name}Params`);
          vm.$backOther && vm.$backOther();
        }
      });
    }
  };
};
export default SetRouteParam;

调用方式（例如某路由页面）

import BackStorage from '@/mixin/BackStorage';

export default {
  mixins: [BackStorage(['AttendanceViewDetail'])], # 传入子页面路由用于判断
  data() {
    return {
      search: {
        xxx: '',
        ddd: ''
      },
      pager: {
        page: 1,
        limit: 10,
        totalCount: 0
      },
    };
  },
  methods: {

    /** 路由# 返回进入 */
    async $backEnter({ search, pager }) { # 传入记录参数
      this.search = search;
      this.pager = pager;
      this.netGetList();
    },

    /** 路由# 正常进入 */
    async $backOther() {
      this.netGetList();
    },

    /** 路由# 离开页面 */
    $backLeave() {
      return { search: this.search, pager: this.pager }; # 返回记录参数
    },
  },
};