A complete example of Vue's multi-level jump (page drill-down) function for related pages

tgtPageParams: {}, // Target page data for the associated jump (only one item is retained)
srcPageParams: [], // Source page data of the associated jump (array type, retains data of multiple pages, can be returned in multiple layers until returning to the initial page)

// Associate jump, jump to the target page, and save the data of the source page and the target page to Vuex
goTargetPage(state, options) {
  // Add tgtPageName identifier to the query of the source page to remember the target page options.srcParams.query = Object.assign({}, options.srcParams.query, { tgtPageName: options.tgtParams.name });
  // Add srcPageName to the query of the target page to remember the source page options.tgtParams.query = Object.assign({}, options.tgtParams.query, { srcPageName: options.srcParams.name });

  state.srcPageParams.push(options.srcParams); // Save source page data state.tgtPageParams = options.tgtParams; // Save target page data router.push({ name: options.tgtParams.name, query: options.tgtParams.query }); // Jump to target page },

// Associate jump, jump back to the source page goSourcePage(state, vm) {
  let obj = state.srcPageParams.slice(-1)[0]; // Take the last item of the array // If Vuex has data from the previous page, return to the previous page based on the data from Vuex if (obj && Object.keys(obj).length > 0) {
    router.push({ name: obj.name, query: obj.query }); // Redirect }
  // If there is no data from the previous page in Vuex, but there is a flag for the previous page on the route, return to the previous page according to the route flag (this is to prevent the problem of Vuex data being lost and unable to return to the previous page when refreshing the details page)
  else if (vm && vm.$route.query.srcPageName) {
    router.push({ name: vm.$route.query.srcPageName });
  }
},

/**
 * This method can be used to associate jump related pages* 1. Source page: the data saved in Vuex can be restored to data for use* 2. Target page: the data passed from the source page to Vuex can be put into data for use* 3. After the source page data is restored, delete the corresponding backup data in Vuex and delete the target page identifier saved on the route* @param vm {object} Required current Vue component instance*/
$changeVueData: (vm) => {
  let tgtParams = store.state.tgtPageParams;
  let srcParams = vm.$store.state.srcPageParams.slice(-1)[0] || {}; // Get the last element value let name = vm.$route.name;
  let query = vm.$deepCopyJSON(vm.$route.query); // The deep copy here is because $route.query needs to be updated // Determine whether the current page is the target page or the source page // The judgment condition is to first determine whether the route name is consistent, and then determine whether the attribute value of the specified query is also consistent 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 the current page is the target page if (isTgtPage) {
    Object.assign(vm.$data, tgtParams.data || {}); // Update the data passed from the source page to the data() of the current page so that the page can query it.}
  // If the current page is the source page if (isSrcPage) {
    Object.assign(vm.$data, srcParams.data || {}); // Update the data saved before the jump to the data() of the current page so that the page can be restored store.commit('popSourcePage'); // Delete the last data item of srcPageParams // After the source page associated jump logic is completed, clear the target page identifier on the current page route to prevent problems with refreshing the page 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: {
    // Return to the text of the previous page backText: {
      type: String,
      default: () => 'Previous step'
    },
    // Function to return to the previous page backFn: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      showBackBtn: false,
    };
  },
  mounted() {
    this.setBackBtnShow();
  },
  activated() {
    this.setBackBtnShow();
  },
  methods: {
    // Update the status of the button to return to the previous page 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>

// Root component App.vue
/*...code omitted...*/
watch:
  // Listen, execute when the route changes $route(to, from) {
    // If it is neither the source page nor the target page, clear the data saved in Vuex // Prevent switching menus or performing other operations during the associated jump, resulting in residual data from the last associated jump in Vuex if (!to.query.srcPageName && !to.query.tgtPageName) {
      this.$store.commit('clearTargetPage');
      this.$store.commit('clearSourcePage');
    }
  },
},
/*...code omitted...*/

// Page A.vue
/*...code omitted...*/
mounted() {
  vm = this;
  vm.$changeVueData(vm); // Jump to related pages. Each time you enter a page, you must execute the $changeVueData function. For specific usage, refer to the comment of the calling method. vm.ready();
},
/*...code omitted...*/
Step 2, jump from page A to page B, the code is as follows:

// Page A.vue
/*...code omitted...*/
methods: {
  // Jump to page 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);
  },
},
/*...code omitted...*/

// Page B.vue
/*...code omitted...*/
mounted() {
  vm = this;
  vm.$changeVueData(vm); // Jump to related pages. Each time you enter a page, you must execute the $changeVueData function. For specific usage, refer to the comment of the calling method. vm.ready();
},
/*...code omitted...*/
Step 4, return to page A, the code is as follows:

// Page B.vue
/*...code omitted...*/
<template>
  <div>
    <backButton :backFn="$goSourcePage"></backButton>
    /*...code omitted...*/
  </div>
</template>
/*...code omitted...*/