el-steps不跳转路由切换页面

先看效果图
第一页

第二页

因为这是我测试制作的网页，所以不标准也不规范，我只是把大概流程写一下。

<template>
  <div>
    <el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
</el-steps>
//这是我的组件，先根据条件隐藏起来，当条件符合就显示出来
<Step1 v-show="active==1"/>
<Step2 v-show="active==2"/>
<el-button @click="prev" >上一步</el-button>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
//引入组件
import Step1 from '../dd.vue'
import Step2 from '../f.vue'

export default {
 data() {
    return {
    //默认显示第一个组件
         active: 1
                      
    }
  },
   components: {
    Step1,
    Step2,
   },
   methods: {
   //上一步
      prev() {
      --this.active;
      //判断条件，当active小于1，显示第一个组件
      if (this.active < 1) this.active = 1;
    },
    //下一步
        if (this.active++ >=2) this.active = 1;
      }
  }
}
</script>

<style>

</style>