如何在 vue 和打字稿中重定向到向导中的特定步骤答案

【问题标题】：How to get redirected to a particular step in a wizard in vue and typescript如何在 vue 和打字稿中重定向到向导中的特定步骤
【发布时间】：2023-01-10 02:29:40
【问题描述】：

该向导有 6 个步骤，其中最后一步有一个重定向按钮而不是完成按钮（完成向导。用户单击重定向按钮时应该将用户带回到向导的第 4 步，并且用户必须执行这些步骤5 和 6 完成向导。

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>

路由器.ts

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

精灵.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>

编写的代码将用户重定向到第 4 步，但它不在向导内，而是显示在整个页面上。有人可以帮忙吗？

【问题讨论】：

标签： typescript vue.js web quasar

【解决方案1】：

路由器链接专门用于更改应用程序的当前页面，这就是为什么您会看到 stepFour 组件完全替换了所有内容。评论 Quasar 的QStepper API documentation。无需使用路由器链接来控制组件的导航。它内置于带有v-model 的组件中，其中更改 v-model 值将更改组件显示的步骤。一个非常基本的例子：

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

现在在函数中，如果将 step 设置为值 1、2 或 3，q-stepper 会将当前显示的步骤设置为同名的 q-step 子组件。

【讨论】：