Vue实现关联页面多级跳转（页面下钻）功能的完整实例

tgtPageParams: {}, // 关联跳转的目标页面数据（只保留一项数据）
srcPageParams: [], // 关联跳转的源页面数据（数组类型，保留多个页面的数据，可以多层返回，直到返回初始页面）

// 关联跳转，跳转到目标页面，并保存源页面和目标页面的数据到 Vuex
goTargetPage(state, options) {
  // 在源页面的 query 添加 tgtPageName 标识，记住目标页面
  options.srcParams.query = Object.assign({}, options.srcParams.query, { tgtPageName: options.tgtParams.name });
  // 在目标页面的 query 添加 srcPageName 标识，记住源页面
  options.tgtParams.query = Object.assign({}, options.tgtParams.query, { srcPageName: options.srcParams.name });

  state.srcPageParams.push(options.srcParams); // 保存源页面数据
  state.tgtPageParams = options.tgtParams; // 保存目标页面数据

  router.push({ name: options.tgtParams.name, query: options.tgtParams.query }); // 跳转到目标页面
},

// 关联跳转，跳转回源页面
goSourcePage(state, vm) {
  let obj = state.srcPageParams.slice(-1)[0]; // 取数组的最后一项
  // 如果 Vuex 有上一页的数据，则根据 Vuex 的数据返回上一面
  if (obj && Object.keys(obj).length > 0) {
    router.push({ name: obj.name, query: obj.query }); // 进行跳转
  }
  // 如果 Vuex 中没有上一页的数据，但是路由上有上一页的标志，则根据路由标志返回上一页（这是为了防止在详情页中刷新时，Vuex 数据丢失，无法返回上一页的问题）
  else if (vm && vm.$route.query.srcPageName) {
    router.push({ name: vm.$route.query.srcPageName });
  }
},

/**
 * 关联跳转相关的页面可以使用此方法
 * 1、源页面：可以把保存到 Vuex 中的数据恢复到 data 中使用
 * 2、目标页面：可以把源页面传递到 Vuex 中的数据放到 data 中使用
 * 3、源页面数据恢复后，删除 Vuex 中对应的备份数据，删除路由上保存的目标页标识
 * @param vm {object} 必填 当前 Vue 组件实例
 */
$changeVueData: (vm) => {
  let tgtParams = store.state.tgtPageParams;
  let srcParams = vm.$store.state.srcPageParams.slice(-1)[0] || {}; // 取最后一个元素值
  let name = vm.$route.name;
  let query = vm.$deepCopyJSON(vm.$route.query); // 这里深拷贝是因为 $route.query 需要更新

  // 判断当前页是 目标页面 还是 源页面
  // 判断条件是 先判断路由名是否一致，再判断指定的 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);

  // 如果当前页面是目标页面
  if (isTgtPage) {
    Object.assign(vm.$data, tgtParams.data || {}); // 将 源页面传过来的数据 更新到当前页面的 data()，以便页面进行查询
  }
  // 如果当前页面是源页面
  if (isSrcPage) {
    Object.assign(vm.$data, srcParams.data || {}); // 跳转前保存的数据 更新到当前页面的 data()，以便页面进行还原
    store.commit('popSourcePage'); // 将 srcPageParams 的最后一项数据删除
    // 源页面关联跳转逻辑结束后，清除掉当前页路由上的目标页标识，防止刷新页面有问题
    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: {
    // 返回上一页的文字
    backText: {
      type: String,
      default: () => '上一步'
    },
    // 返回上一页的函数
    backFn: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      showBackBtn: false,
    };
  },
  mounted() {
    this.setBackBtnShow();
  },
  activated() {
    this.setBackBtnShow();
  },
  methods: {
    // 更新返回上一页按钮的状态
    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: {
  // 监听，当路由发生变化的时候执行
  $route(to, from) {
    // 如果即不是源页面，也不是目标页面，则清空 Vuex 中保存的数据
    // 防止在关联跳转的过程中切换菜单或者进行其他操作，导致 Vuex 中有上一次关联跳转残留的数据
    if (!to.query.srcPageName && !to.query.tgtPageName) {
      this.$store.commit('clearTargetPage');
      this.$store.commit('clearSourcePage');
    }
  },
},
/*...省略的代码...*/

// 页面 A.vue
/*...省略的代码...*/
mounted() {
  vm = this;
  vm.$changeVueData(vm); // 关联跳转相关页面，每次进入页面，必需执行 $changeVueData 函数，具体用法参考调用方法的注释

  vm.ready();
},
/*...省略的代码...*/
步骤 2，从 页面A 跳转到 页面 B ，代码如下：

// 页面 A.vue
/*...省略的代码...*/
methods: {
  // 跳转到 B 页面
  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);
  },
},
/*...省略的代码...*/

// 页面 B.vue
/*...省略的代码...*/
mounted() {
  vm = this;
  vm.$changeVueData(vm); // 关联跳转相关页面，每次进入页面，必需执行 $changeVueData 函数，具体用法参考调用方法的注释

  vm.ready();
},
/*...省略的代码...*/
步骤 4，返回 页面 A ，代码如下：

// 页面 B.vue
/*...省略的代码...*/
<template>
  <div>
    <backButton :backFn="$goSourcePage"></backButton>
    /*...省略的代码...*/
  </div>
</template>
/*...省略的代码...*/