vue 多個(gè)頁面跳轉(zhuǎn)

注冊(cè)有三個(gè)步驟，如圖，之前沒寫過vue項(xiàng)目，想請(qǐng)教一下，要寫成三個(gè)頁面嗎？
我想寫在一個(gè)頁面，通過隱藏顯示每一步，但是在一個(gè)頁面涉及到后退時(shí)，就退出了整個(gè)注冊(cè)
想請(qǐng)教大神有什么好的實(shí)現(xiàn)思路~
圖片一直無法上傳，放在鏈接里了
注冊(cè)步驟

============================華麗麗的分割線=========================================
謝謝大家的意見，謝謝一樓給了思路，后退的部分，透過判斷是否是第一個(gè)步，如果不是的話就讓step減一，
如果是的話就整個(gè)頁面后退

  <template lang="html">
  <div class="register">
    <mt-header>
      <div slot="left">
        <mt-button icon="back" @click="step=step-1" v-if="step!==1"></mt-button>
        <mt-button icon="back" @click="$router.go(-1)" v-else></mt-button>
      </div>
    </mt-header>
    <v-step1 v-show="step===1">
    </v-step1>
    <v-step2 v-show="step===2">
    </v-step2>
    <v-step3 v-show="step===3">
    </v-step3>
    <div class="register">
      還沒有賬戶?<a href="">注冊(cè)</a>
    </div>
  </div>
</template>

<script>
  import Step1 from 'components/register/step1.vue'
  import Step2 from 'components/register/step2.vue'
  import Step3 from 'components/register/step3.vue'
  import {
    Toast
  } from 'mint-ui'
  export default {
    components: {
      'v-step1': Step1,
      'v-step2': Step2,
      'v-step3': Step3,
    },
    data() {
      return {
        step: 1
      }
    },
    methods: {
    
    }
  }

</script>

<style lang="less" scoped>
  @import '../assets/fz.less';

  .register {
    >section {
      width: 80%;
      margin: 0 auto;
      .form-box {
        .forget {
          margin: 4vw 0 10vw 0;
          text-align: center;
          .fz(font-size, 26);
          color: #b3b3b3;
          a {
            color: @cl;
          }
        }
        .or {
          text-align: center;
          position: relative;
          line-height: 5vw;
          .division {
            display: inline-block;
            width: 38%;
            border-bottom: 1px solid #e8ecef;
            vertical-align: middle;
          }
          .txt-or {
            .fz(font-size, 26);
            display: inline-block;
            color: #b2b2b2;
            width: 20%;
          }
        }
        .wechat {
          line-height: 5vw;
          margin-top: 5vw;
          text-align: center;
          span {
            color: #19d100;
            .fz(font-size, 28);
          }
        }
      }
    }
    .register {
      text-align: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 10vw;
      border-top: 1px solid #e8ecef;
      color: #797979;
      .fz(font-size, 26);
      a {
        color: @cl;
        margin-left: 2vw;
      }
    }
  }

</style>