The wizard has 6 steps in which the last step has a redirecting button other than finish button (that completes the wizard.The user when clicks the redirect button it should take the user back to step 4 of the wizard and the user has to perform steps 5 and 6 to complete the wizard.

step6.ts

<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
    
    @transition="transitionPanel"
  >
    <slot />

    <template v-slot:navigation>
      <q-card-actions  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"
          
        />

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

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

connection.ts

<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
        
        :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>

the code written redirects the user to step 4 but it is not inside the wizard rather it is displayed for the whole page. Could someone help with this.

CodePudding user response：

Router-links are specifically meant to change your app's current page, which is why you see your stepFour component completely replace everything. Review Quasar's QStepper API documentation. There is no need to use router-links to control navigation of the component. It's built into the component with v-model, where changing the v-model value will change which step the component displays. A very basic example:

<q-stepper
  v-model="step"
>
  <q-step :name="1" />
  <q-step :name="2" />
  <q-step :name="3" />
</q-stepper>

Now in a function if you set step to a value 1, 2 or 3, q-stepper will set the current displayed step to that same named q-step child component.