Как сделать пошаговую навигацию с помощью vue router? - PullRequest
Новая
       6

Как сделать пошаговую навигацию с помощью vue router?

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

Я хочу сделать пошаговую навигацию для страницы регистрации пользователя, и я хочу сделать каждый шаг отдельным маршрутом, но мне нужно сохранить одинаковые URL для каждого из них, чтобы пользователь не смог перейти сразу к шагу 3.

вот что у меня в настоящее время есть маршруты: 

{
  path: '/signup',
  component: SignupPage,
  children: [
    { path: '', name: 'signup.step1', component: SignupStep1 },
    { path: '', name: 'signup.step2', component: SignupStep2 },
    { path: '', name: 'signup.step3', component: SignupStep3 },
    { path: '', name: 'signup.step4', component: SignupStep4 }
  ]
}

RegistrationPage: 

<header>...</header>
<router-view />
<footer>...</footer>

RegistrationStep1: 

methods: {
  nextStep () {
    this.$router.push({ name: 'signup.step2' })
  }
  ...
}

но когда вызывается метод nextStepкажется, ничего не меняется

1 Ответ

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

Я коротко отвечу на этот вопрос.

Два оптимальных способа решения этой задачи - использовать Vuetify и его готовый к использованию Steppers-компонент , а второй - передать данныечерез params от одного шага к следующему.

Позвольте мне объяснить второй вариант: vue-router позволяет нам легко передавать данные любого типа из одного URL-адреса в другой, даже не показывая эти данные каким-либо образомконечный пользователь.Как передавать данные между URL, вы можете прочитать в vue-router docs , и в вашем случае вам даже не нужно 4-5-6 компонентов, этого будет достаточно, чтобы использовать 1 компонент + панели вкладок или любойдругой элемент для переключения шагов.

, но при вызове метода nextStep ничего не меняется

Это происходит потому, что у вас 4 пути с одинаковым значением - пустое значение.vue-router ищет маршруты сверху вниз, и если он находит тот, который соответствует текущему пути, никакие другие записи не будут проверены, поэтому вы видите только singup -page.

...