Материал Vue (степперы): запретить пользователю пропуск шагов + привязка шагов к определенному маршруту

Question

Здесь вопрос для начинающих :) Я хотел бы создать степпер с 5 вкладками, где вы не можете перейти к шагу 3, если вы не выполнили шаг 2 (или шаг 4, если вы не выполнили шаг 3 и т. Д.)).Если он находится на шаге 4 и хочет вернуться к шагу 2, то все остальные шаги также должны быть деактивированы.

Кроме того, как я могу связать шаги с определенным маршрутом вместо того, чтобы помещать содержимое вТеги md-step.

Надеюсь, мой вопрос понятен.Заранее спасибо.

Answer 1

Если у вас есть все ваши вкладки, использующие vue-router, вы можете создать защитный экран маршрутизатора, который уходит и проверяет текущее состояние, в котором находится пользователь, что помешает пользователю получить доступ к этому представлению.Вы также хотели бы настроить какое-то отключенное состояние, которое показывает, где находится пользователь, чтобы значки вкладок могли генерироваться динамически.Хотя все это интерфейс, так что это не серебряная пуля для вашей проблемы.

https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards