tgtPageParams: {}, // 關(guān)聯(lián)跳轉(zhuǎn)的目標(biāo)頁(yè)面數(shù)據(jù)（只保留一項(xiàng)數(shù)據(jù)）
srcPageParams: [], // 關(guān)聯(lián)跳轉(zhuǎn)的源頁(yè)面數(shù)據(jù)（數(shù)組類型，保留多個(gè)頁(yè)面的數(shù)據(jù)，可以多層返回，直到返回初始頁(yè)面）

// 關(guān)聯(lián)跳轉(zhuǎn)，跳轉(zhuǎn)到目標(biāo)頁(yè)面，并保存源頁(yè)面和目標(biāo)頁(yè)面的數(shù)據(jù)到 Vuex
goTargetPage(state, options) {
  // 在源頁(yè)面的 query 添加 tgtPageName 標(biāo)識(shí)，記住目標(biāo)頁(yè)面
  options.srcParams.query = Object.assign({}, options.srcParams.query, { tgtPageName: options.tgtParams.name });
  // 在目標(biāo)頁(yè)面的 query 添加 srcPageName 標(biāo)識(shí)，記住源頁(yè)面
  options.tgtParams.query = Object.assign({}, options.tgtParams.query, { srcPageName: options.srcParams.name });

  state.srcPageParams.push(options.srcParams); // 保存源頁(yè)面數(shù)據(jù)
  state.tgtPageParams = options.tgtParams; // 保存目標(biāo)頁(yè)面數(shù)據(jù)

  router.push({ name: options.tgtParams.name, query: options.tgtParams.query }); // 跳轉(zhuǎn)到目標(biāo)頁(yè)面
},

// 關(guān)聯(lián)跳轉(zhuǎn)，跳轉(zhuǎn)回源頁(yè)面
goSourcePage(state, vm) {
  let obj = state.srcPageParams.slice(-1)[0]; // 取數(shù)組的最后一項(xiàng)
  // 如果 Vuex 有上一頁(yè)的數(shù)據(jù)，則根據(jù) Vuex 的數(shù)據(jù)返回上一面
  if (obj && Object.keys(obj).length > 0) {
    router.push({ name: obj.name, query: obj.query }); // 進(jìn)行跳轉(zhuǎn)
  }
  // 如果 Vuex 中沒有上一頁(yè)的數(shù)據(jù)，但是路由上有上一頁(yè)的標(biāo)志，則根據(jù)路由標(biāo)志返回上一頁(yè)（這是為了防止在詳情頁(yè)中刷新時(shí)，Vuex 數(shù)據(jù)丟失，無(wú)法返回上一頁(yè)的問(wèn)題）
  else if (vm && vm.$route.query.srcPageName) {
    router.push({ name: vm.$route.query.srcPageName });
  }
},

/**
 * 關(guān)聯(lián)跳轉(zhuǎn)相關(guān)的頁(yè)面可以使用此方法
 * 1、源頁(yè)面：可以把保存到 Vuex 中的數(shù)據(jù)恢復(fù)到 data 中使用
 * 2、目標(biāo)頁(yè)面：可以把源頁(yè)面?zhèn)鬟f到 Vuex 中的數(shù)據(jù)放到 data 中使用
 * 3、源頁(yè)面數(shù)據(jù)恢復(fù)后，刪除 Vuex 中對(duì)應(yīng)的備份數(shù)據(jù)，刪除路由上保存的目標(biāo)頁(yè)標(biāo)識(shí)
 * @param vm {object} 必填 當(dāng)前 Vue 組件實(shí)例
 */
$changeVueData: (vm) => {
  let tgtParams = store.state.tgtPageParams;
  let srcParams = vm.$store.state.srcPageParams.slice(-1)[0] || {}; // 取最后一個(gè)元素值
  let name = vm.$route.name;
  let query = vm.$deepCopyJSON(vm.$route.query); // 這里深拷貝是因?yàn)?$route.query 需要更新

  // 判斷當(dāng)前頁(yè)是 目標(biāo)頁(yè)面 還是 源頁(yè)面
  // 判斷條件是 先判斷路由名是否一致，再判斷指定的 query 的屬性值是否也一致
  let isTgtPage = tgtParams.name === name &&
    (tgtParams.checkKeys ? tgtParams.checkKeys.every(key => tgtParams.query[key] === query[key]) : true);
  let isSrcPage = srcParams.name === name &&
    (srcParams.checkKeys ? srcParams.checkKeys.every(key => srcParams.query[key] === query[key]) : true);

  // 如果當(dāng)前頁(yè)面是目標(biāo)頁(yè)面
  if (isTgtPage) {
    Object.assign(vm.$data, tgtParams.data || {}); // 將 源頁(yè)面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù) 更新到當(dāng)前頁(yè)面的 data()，以便頁(yè)面進(jìn)行查詢
  }
  // 如果當(dāng)前頁(yè)面是源頁(yè)面
  if (isSrcPage) {
    Object.assign(vm.$data, srcParams.data || {}); // 跳轉(zhuǎn)前保存的數(shù)據(jù) 更新到當(dāng)前頁(yè)面的 data()，以便頁(yè)面進(jìn)行還原
    store.commit('popSourcePage'); // 將 srcPageParams 的最后一項(xiàng)數(shù)據(jù)刪除
    // 源頁(yè)面關(guān)聯(lián)跳轉(zhuǎn)邏輯結(jié)束后，清除掉當(dāng)前頁(yè)路由上的目標(biāo)頁(yè)標(biāo)識(shí)，防止刷新頁(yè)面有問(wèn)題
    delete query.tgtPageName;
    vm.$router.push({ name, query });
  }
},

// back-button.vue
<template>
  <button class="primary-btn return-btn" v-if="showBackBtn" @click="backFn">
    <i class="return-icon"></i>{{ backText }}
  </button>
</template>
<script>
export default {
  name: 'back-button',
  props: {
    // 返回上一頁(yè)的文字
    backText: {
      type: String,
      default: () => '上一步'
    },
    // 返回上一頁(yè)的函數(shù)
    backFn: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      showBackBtn: false,
    };
  },
  mounted() {
    this.setBackBtnShow();
  },
  activated() {
    this.setBackBtnShow();
  },
  methods: {
    // 更新返回上一頁(yè)按鈕的狀態(tài)
    setBackBtnShow() {
      this.$nextTick(() => {
        let srcPage = this.$store.state.srcPageParams.slice(-1)[0];
        this.showBackBtn = Boolean(srcPage && Object.keys(srcPage).length > 0);
      });
    },
  },
};
</script>
<style scoped lang="scss">
</style>

// 根組件 App.vue
/*...省略的代碼...*/
watch: {
  // 監(jiān)聽，當(dāng)路由發(fā)生變化的時(shí)候執(zhí)行
  $route(to, from) {
    // 如果即不是源頁(yè)面，也不是目標(biāo)頁(yè)面，則清空 Vuex 中保存的數(shù)據(jù)
    // 防止在關(guān)聯(lián)跳轉(zhuǎn)的過(guò)程中切換菜單或者進(jìn)行其他操作，導(dǎo)致 Vuex 中有上一次關(guān)聯(lián)跳轉(zhuǎn)殘留的數(shù)據(jù)
    if (!to.query.srcPageName && !to.query.tgtPageName) {
      this.$store.commit('clearTargetPage');
      this.$store.commit('clearSourcePage');
    }
  },
},
/*...省略的代碼...*/

// 頁(yè)面 A.vue
/*...省略的代碼...*/
mounted() {
  vm = this;
  vm.$changeVueData(vm); // 關(guān)聯(lián)跳轉(zhuǎn)相關(guān)頁(yè)面，每次進(jìn)入頁(yè)面，必需執(zhí)行 $changeVueData 函數(shù)，具體用法參考調(diào)用方法的注釋

  vm.ready();
},
/*...省略的代碼...*/
步驟 2，從 頁(yè)面A 跳轉(zhuǎn)到 頁(yè)面 B ，代碼如下：

// 頁(yè)面 A.vue
/*...省略的代碼...*/
methods: {
  // 跳轉(zhuǎn)到 B 頁(yè)面
  goUserSituation: function (name) {
    let srcParams = {
      name: vm.$route.name,
      query: vm.$route.query
    };
    let tgtParams = {
      name: 'user-situation',
      data: {
        checkedSystem: name
      }
    };
    vm.$goTargetPage(srcParams, tgtParams);
  },
},
/*...省略的代碼...*/

// 頁(yè)面 B.vue
/*...省略的代碼...*/
mounted() {
  vm = this;
  vm.$changeVueData(vm); // 關(guān)聯(lián)跳轉(zhuǎn)相關(guān)頁(yè)面，每次進(jìn)入頁(yè)面，必需執(zhí)行 $changeVueData 函數(shù)，具體用法參考調(diào)用方法的注釋

  vm.ready();
},
/*...省略的代碼...*/
步驟 4，返回 頁(yè)面 A ，代碼如下：

// 頁(yè)面 B.vue
/*...省略的代碼...*/
<template>
  <div>
    <backButton :backFn="$goSourcePage"></backButton>
    /*...省略的代碼...*/
  </div>
</template>
/*...省略的代碼...*/