vue 多个页面跳转

Question

注册有三个步骤，如图，之前没写过vue项目，想请教一下，要写成三个页面吗？
我想写在一个页面，通过隐藏显示每一步，但是在一个页面涉及到后退时，就退出了整个注册
想请教大神有什么好的实现思路~
图片一直无法上传，放在链接里了
注册步骤

============================华丽丽的分割线=========================================
谢谢大家的意见，谢谢一楼给了思路，后退的部分，透过判断是否是第一个步，如果不是的话就让step减一，
如果是的话就整个页面后退

  <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="">注册</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>

Answer 1

看不见你的图片，三个步骤分成三个模板组件就行了吧，通过v-show或者v-if指令来控制显示

大概长成这个样子

<Step1 v-show="step===1"/>
<Step2 v-show="step===2"/>
<Step3 v-show="step===3"/>

<a @click="hdlClickCancel">取消</a>

Answer 2

终于看到了图，写成一个页面的话，后退一下就退出了注册，如果是我，我会写成3个页面。

Answer 3

SPA=Single Page Application
Vue,Angular,React这些前端框架主要不就是做单页面应用开发吗，为啥一个小小的注册功能要多个页面呢？https://www.jianshu.com/p/eff... 这篇教程是否可以解答楼主疑问？