Question

我想将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步进器的强大功能。

根据我的经验，最大的陷阱是（与v-tab相反），每个步骤都必须有自己的v-stepper-content。如果要使用标签执行此操作，则只需创建一个tab-item并更新视图。我无法使用v-stepper来执行此操作，因为它不会继续进行下一个“步骤”。

有人会有创意吗？

Answer 1

作为@tmfmaynard的附加答案，为了在页面刷新后将正确突出显示的步进器与您当前的路线对齐，这是代码。

 <v-stepper v-model="e1" alt-labels non-linear>
    <v-stepper-header class="elevation-0">
      <v-stepper-step 
        step="1" 
        class="caption" 
        editable
        @click="$router.push({name: 'name'}).catch(err => {})" 
      >
      </v-stepper-step>
    </v-stepper-header>

    <v-stepper-items>
      <v-stepper-content step="1">
        <router-view />
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>

<script>
export default {
  data () {
    return {
      e1: 1
    }
  },

  created() {
    this.getStepper()
  },

  methods: {
    getStepper() {
      const path = this.$route.path.split('/')
      if(path[path.length-1].toLowerCase() === 'your-router-path') {
        this.e1 = 1
        // this.e1 = 1 = <v-stepper-step step="1" />
        // this.e1 = 2 = <v-stepper-step step="2" />
        // and so on.
      }
    }
  }
}

Answer 2

我能够做到以下几点：

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

...

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

您应该能够做到这一点：

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

但是由于某种原因，路由器是不确定的……至少对我而言。

将Vuetify v-stepper与Vue路由器动态集成

2 个答案: