我想将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并更新 View 。我无法使用v-stepper做到这一点,因为它不会继续进行下一个“步骤”。

    会有人有创造力的方法吗?

    最佳答案

    我可以通过执行以下操作来实现此目的:

    <v-stepper-step @click="goToRoute('step1')">
    



    goToRoute(name) {
       this.$router.push({'name': name})
    }
    

    您应该可以执行以下操作:

    <v-stepper-step @click="$router.push({'name': name})">
    

    09-20 05:01