Я использовал объект истории HTML 5 для создания шагов в URL, и мне нужна помощь, чтобы переписать URL

Question

Есть мастер (сделан с использованием VUEJS), который имеет 6 шагов.При использовании веб-сайта объекта истории добавляется суффикс с каждым шагом (например, www.abc.com/step1, www.abc.com/step2) и так далее.Он работает правильно с помощью мастера, но не работает, когда пользователь нажимает на какой-либо из шагов напрямую, он обслуживает ошибку 404 (очевидно, из-за поддельных URL-адресов).

Мне нужно переписать URL-адрес, чтобы включить информацию о ходе выполнения в зависимости от того, где находится пользователь в текущем рабочем процессе (с шага 1 до 6).Таким образом, пользователь попадает на страницу шага, даже если он попадает на страницу шага напрямую.

Я пытался сделать это через PHP.

  stepForward: function () {
    this.loaded = false
    this.stepCurrent = this.stepCurrent + 1
    this.loaded = true

    // Step forward using history object
    let url = 'step' + this.stepCurrent
    history.pushState(this.stateObject, null, url)
  },
  stepBack: function () {
    this.loaded = false
    this.stepCurrent = this.stepCurrent - 1
    this.loaded = true
    // Step back using history object
    if (this.stepCurrent > 0) {
      let url = 'step' + this.stepCurrent
      history.pushState(this.stateObject, null, url)
    }else{
      this.firstStep()
    }

  }

Буду признателен за любую помощь.

Answer 1

Вы должны проверить Vue Router: https://router.vuejs.org/guide/#html

С этим вы можете просто позвонить. $ Router для ссылки на маршрут и рендеринга различных шаблонов / компонентов, просто объявив их как маршруты в классе VueRouter.

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