I have used HTML 5 history object to create steps within the URL and I need help rewrite URLs

There is a wizard (made using VUEJS) that has 6 steps. Using the History object website's URL is suffixed with each step (like www.abc.com/step1, www.abc.com/step2) so on and forth. It is working correctly using the wizard but it does not work when the user hit any of the steps directly, it serves 404 error (obviously because of fake URLs).

I need to Rewrite URL to include progress information based on where the user is in the current workflow (from step 1 to 6). So it lands the user on the step page even if he hits the step page directly.

I have tried to do this via 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()
    }

  }

Any help would be really appreciated.

1 answer

  • answered 2019-06-11 23:29 Matt Berg

    You should check out the Vue Router: https://router.vuejs.org/guide/#html

    With this you can just call this.$router to reference the route and render different templates/components simply by declaring them as routes in a VueRouter class.

    Im thinking maybe in the mounted or computed method you can scan the router history and render the appropriate component based on the current route.