我想将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-tab相反),每个步骤都必须有自己的
v-stepper-content
。如果要使用选项卡执行此操作,则只需创建一个tab-item
并更新 View 。我无法使用v-stepper
做到这一点,因为它不会继续进行下一个“步骤”。会有人有创造力的方法吗?
最佳答案
我可以通过执行以下操作来实现此目的:
<v-stepper-step @click="goToRoute('step1')">
和
goToRoute(name) {
this.$router.push({'name': name})
}
您应该可以执行以下操作:
<v-stepper-step @click="$router.push({'name': name})">