Vue+TypeScript向导组件跳转至指定步骤问题求助

我开发的向导组件包含6个步骤，最后一步除完成按钮外设有一个跳转按钮，点击该按钮应回到向导内的第4步，用户需继续完成第5、6步以结束向导。当前使用router-link跳转至/stepFour的代码，会将StepFour页面全屏展示，而非在向导组件内显示，恳请协助解决该问题。

现有代码 #

step6.vue #

<router-link
        to="/stepFour"
        custom
        v-slot="{ navigate }"
>
        <q-btn
          :ripple="false"
          flat
          :label="$t('pages.projects.project.deviceConnection.validation.symbolDidntBlink')"
          @click="navigate"
          role="link"
        />
</router-link>

router.ts #

const routes = [
  //connect: redirect
  {
    path: 'stepFour',
    name: 'step4',
    component: () => import('components/connection/4_stepFour/stepFour.vue'),
    props: {
      slaveLevel: 1,
    },
  },
];

wizard.vue #

<template>
  <q-stepper
    v-bind:value="value"
    v-on:input="handleInput"
    ref="stepper"
    color="primary"
    flat
    class="c-stepper"
    @transition="transitionPanel"
  >
    <slot />

    <template v-slot:navigation>
      <q-card-actions class="c-wizarDialog__footer c-btn__action" align="center">
        <q-btn
          v-if="value > 1 && !disablePreviousButton"
          :ripple="false"
          :disable="disablePreviousButton"
          icon="chevron_left"
          flat
          dense
          size="lg"
          text-color="primary"
          @click="goPrevious($refs)"
          data-cy="wizard-back"
          class="c-btn--previous"
        />

        <q-btn
          :ripple="false"
          v-if="value === numberOfSteps"
          :disable="disableFinishButtonState"
          @click="finish(actionButtonFunction)"
          color="primary"
          :label="$t('general.finish')"
          class="c-btn--finish full-width"
          data-cy="wizard-finish"
        />

        <q-btn
          v-else-if="pShowNextButton"
          :ripple="false"
          :disabled="disableNextButton"
          @click="goToNextStep($refs)"
          color="primary"
          class="c-btn--continue full-width"
          data-cy="wizard-continue"
        >
          {{ $t('general.continue') }}
        </q-btn>
      </q-card-actions>
    </template>
  </q-stepper>
</template>

connection.vue #

<template>
  <WizardDialog
    :title="$t('components.appBar.connection')"
    :actionButtonTitle="$t('general.createButtonText')"
    v-on:dialogVisibility="handleDialogVisibility"
    :cancelButtonLabel=""
  >
    <Wizard
      :number-of-steps="numberOfSteps"
      v-model="step"
      :action-button-function="finishFunction"
      :disable-next-button="disableNextButton"
      :has-step-errors="hasStepErrors"
    >
      <WizardStep
        class="c-identifyDialog"
        :number-of-steps="numberOfSteps"
        :name="0"
        :done="step > 0"
      >
<!-- wizard steps from 1 to 5 -->

      <WizardStep :number-of-steps="numberOfSteps" :name="6" :done="step > 6" v-if="!isHelp">
        <StepSix />
      </WizardStep>
    </Wizard>
  </WizardDialog>
</template>

问题核心是你误用了路由跳转——路由会替换整个页面内容，而你的向导是通过内部step状态控制步骤切换的，直接修改step值即可实现向导内的步骤跳转。

1. 修改StepSix组件，替换router-link为自定义事件 #

移除router-link，给按钮添加点击事件，触发自定义事件通知父组件切换步骤：

<!-- step6.vue 修改后 -->
<q-btn
  :ripple="false"
  flat
  :label="$t('pages.projects.project.deviceConnection.validation.symbolDidntBlink')"
  @click="goBackToStepFour"
  role="link"
/>

<script setup>
const emit = defineEmits(['go-to-step']);

// 注意：这里的数值要和connection.vue中第4步对应的step值一致，比如第4步对应step=3（根据你的步骤编号调整）
const goBackToStepFour = () => {
  emit('go-to-step', 3);
};
</script>

2. 在connection.vue中监听事件，修改step值 #

在StepSix标签上添加事件监听，收到事件后直接更新step变量：

<!-- connection.vue 修改后 -->
<WizardStep :number-of-steps="numberOfSteps" :name="6" :done="step > 6" v-if="!isHelp">
  <StepSix @go-to-step="handleGoToStep" />
</WizardStep>

<script setup>
const step = ref(0); // 你的step变量定义，根据实际情况调整

const handleGoToStep = (targetStep) => {
  step.value = targetStep; // 直接修改step值，向导会自动切换到对应步骤
};
</script>

3. 确认步骤编号匹配 #

根据connection.vue里的WizardStep的name属性，确认第4步对应的step数值：

• 比如第1步name="0"对应step=0，第4步则对应step=3，需保证emit传递的数值和实际步骤对应。

内容的提问来源于stack exchange，提问作者Priyanka Rajendran