Vue.js向导式单页应用页面回退定位问题：从Selection组件返回Starter组件时如何定位到指定页码页面

嘿，我完全懂你的困扰——从Selection1或Selection2组件返回Starter页面时，总是默认回到第一页，而不是你离开时的第三页。这里有几个实用的解决方案，一步步帮你搞定：

方案1：路由传参（最简单直接） #

这个方法不需要额外的状态管理工具，只需要在跳转时带上目标页码的参数，再在Starter组件里读取参数并调整页面。

步骤1：修改Selection组件的返回链接 #

把返回的router-link改成带查询参数的形式，明确告诉Starter组件要跳转到第三页：

<!-- Selection1.vue 和 Selection2.vue 中的返回按钮 -->
<router-link to="/wizard/startup?targetPage=3">
  <button type="button"> Back </button>
</router-link>

步骤2：改造Starter组件的分页逻辑（用Vue数据驱动替代jQuery） #

原来的jQuery操作DOM的方式不太符合Vue的最佳实践，我们改成用数据控制页面显示，同时处理路由参数：

// Starter.vue
export default {
  data() {
    return {
      currentPage: 1 // 初始页码
    };
  },
  mounted() {
    // 读取路由参数中的目标页码
    const targetPage = this.$route.query.targetPage;
    if (targetPage) {
      this.currentPage = parseInt(targetPage);
    }

    // 替换原来的jQuery点击事件，用Vue方式绑定按钮逻辑
    this.$nextTick(() => {
      // 返回按钮逻辑
      this.$el.querySelector('.back-btn').addEventListener('click', () => {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      });
      // 下一步按钮逻辑
      this.$el.querySelector('.next-btn').addEventListener('click', () => {
        if (this.currentPage < 3) {
          this.currentPage++;
        }
      });
    });
  },
  watch: {
    // 监听路由变化，用户刷新页面也能保持定位
    '$route'(newRoute) {
      const targetPage = newRoute.query.targetPage;
      if (targetPage) {
        this.currentPage = parseInt(targetPage);
      }
    }
  }
};

步骤3：修改模板的动态class绑定 #

把原来的静态slide-active改成基于currentPage的动态绑定：

<form class="form-slide" @submit.prevent="submitFormWizard">
  <div class="slide-element" :class="{'slide-active': currentPage === 1}" for="1">
    ...
  </div>
  <div class="slide-element" :class="{'slide-active': currentPage === 2}" for="2">
    ...
  </div>
  <div class="slide-element" :class="{'slide-active': currentPage === 3}" for="3">
    ...
    <router-link v-show="select_op==='selection1'" to="/selection1">
      <button type="button">Go 1</button>
    </router-link>
    <router-link v-show="select_op==='selection2'" to="/selection2">
      <button type="button">Go 2</button>
    </router-link>
    <button class="back-btn" type="button"> Back </button>
  </div>
</form>

这样，当你从Selection组件返回时，路由会带上targetPage=3，Starter组件读取后就会自动切换到第三页。

方案2：使用状态管理（Vuex/Pinia，适合复杂应用） #

如果你的应用后续有更多共享状态需要维护，推荐用状态管理工具来保存当前页码：

步骤1：创建状态存储（以Pinia为例） #

// stores/wizard.js
import { defineStore } from 'pinia';

export const useWizardStore = defineStore('wizard', {
  state: () => ({
    currentPage: 1
  }),
  actions: {
    setPage(page) {
      this.currentPage = page;
    }
  }
});

步骤2：在Starter组件跳转前保存页码 #

把原来的router-link改成点击事件，先保存当前页码再跳转：

<!-- Starter.vue 第三页的跳转按钮 -->
<button type="button" @click="goToSelection1">Go 1</button>
<button type="button" @click="goToSelection2">Go 2</button>

// Starter.vue
import { useWizardStore } from '@/stores/wizard';

export default {
  setup() {
    const wizardStore = useWizardStore();
    const currentPage = wizardStore.currentPage;

    const goToSelection1 = () => {
      wizardStore.setPage(3); // 保存当前页码为3
      this.$router.push('/selection1');
    };

    const goToSelection2 = () => {
      wizardStore.setPage(3);
      this.$router.push('/selection2');
    };

    return {
      currentPage,
      goToSelection1,
      goToSelection2
    };
  }
};

步骤3：Starter组件自动读取状态 #

Starter组件挂载时会自动从状态存储中读取页码，模板同样用动态class绑定currentPage即可。

方案3：本地存储（适合无状态管理的简单场景） #

如果不想用路由传参或状态管理，可以用sessionStorage临时保存页码：

步骤1：Starter组件跳转时保存页码 #

// Starter.vue 跳转按钮的点击事件
const goToSelection1 = () => {
  sessionStorage.setItem('wizardCurrentPage', '3');
  this.$router.push('/selection1');
};

步骤2：Starter组件挂载时读取并清除页码 #

// Starter.vue
mounted() {
  const savedPage = sessionStorage.getItem('wizardCurrentPage');
  if (savedPage) {
    this.currentPage = parseInt(savedPage);
    sessionStorage.removeItem('wizardCurrentPage'); // 读取后清除，避免影响下次进入
  }
}

同样配合动态class绑定currentPage即可实现定位。

为什么原来的props方式没生效？ #

props主要用于父组件向子组件传递数据，而你的场景是子组件通过路由跳转回到父组件页面——这时候Starter组件会重新实例化，props无法传递跨路由的状态，所以需要用上面的路由传参、状态管理或本地存储方式来保存和恢复页面状态。

内容的提问来源于stack exchange，提问作者Anil Degirmenci