Динамически интегрировать Vuetify V-Stepper с маршрутизатором Vue - PullRequest
Новая
       12

Динамически интегрировать Vuetify V-Stepper с маршрутизатором Vue

0 голосов
/ 22 января 2019

Я хотел бы интегрировать vuetify v-stepper с маршрутизатором vue.Мои требования следующие:

  • Каждый шаг имеет свой собственный маршрут (например, /myform/step1, /myform/step2, /myform/step3 и т. Д.)
  • Каждый шаг является отдельным компонентомкоторый динамически загружается (lazy-load).
  • Каждый шаг создается динамически (например, с помощью цикла).

Это скорее вопрос «какой подход лучше».Я пробовал несколько решений, но ни одно из них не соответствует моим требованиям.

  • Я пытался создать вложенные маршруты и поместить 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, потому что он не будет переходить к следующему «шагу».

Будет ли у кого-нибудь творческий подход?

1 Ответ

0 голосов
/ 25 марта 2019

Мне удалось добиться этого, выполнив следующие действия: 

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

...

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

Вы должны быть в состоянии сделать это: 

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

но по какой-то причине роутер не определен ... по крайней мере для меня.

...