标签: v-stepper

我想将 vuetify 的v-stepper与 vue 路由器集成。我的要求如下：

• 每一步都有自己的途径（例如/myform/step1，/myform/step2，/myform/step3等）
• 每个步骤都是动态加载的组件（延迟加载）。
• 每个步骤都是动态创建的（例如，通过循环）。

这更像是一个“什么是最好的方法”这样的问题。我尝试了多种解决方案，但没有一个符合我的要求。

• 我试过创建嵌套路由并router-view在v-stepper-content. 下面举例。我在这里遇到的问题是无法同步更新position（请参阅 v-stepper 元素）和路线。因此，您将始终在更新步骤之前看到路线更新。

<v-stepper v-model="position" vertical>
  <template v-for="(item, index) in steps">

          <v-stepper-step :complete="position > index + 1" :step="index + 1">
            <h2>
              {{item.title}}
            </h2>
          </v-stepper-step>

          <v-stepper-content :step="index+1">
            <router-view></router-view>
          </v-stepper-content>

  </template>
</v-stepper>

• 我尝试的另一个解决方案是直接异步/动态加载组件（因此没有路由器）。然而，我失去了使用浏览器的后退和下一步按钮浏览我的 v-stepper 的漂亮能力。

根据我的经验，最大的陷阱是（与 v-tab 相反），每一步都必须有自己的v-stepper-content. 如果我用选项卡来做这件事，我只会创建一个tab-item并更新视图。我不能这样做v-stepper，因为它不会继续下一步“步骤”。

有人会有创造性的方法吗？

v-stepper在 Vuetify 中使用组件时，边缘会出现一个默认的类似边框的形状：

我想删除它。我试图将 设置elevation为 0 但它不起作用。

<v-stepper v-model="e1" class="elevation-{0}">

代码笔

如何实现这一目标？