elementui步骤条自定义点击跳转页面，返回步骤条保留信息

先看效果图

如果没有点击下一步，步骤条将不可点击，点击下一步可返回上一步，步骤条也可以来回点击跳转页面，还可以转到其他页面，回来后步骤条依然没有改变，保留状态，这个是我自己想的方法，可能有一些不太对，但是我这边大致功能都能实现，如果有什么问题可以指出。

代码
这是我的目录结构，现实中根据你项目需求来

91.vue(起名不规范，这是我专门的测试页面)
步骤条单独是一个组件

<template>
  <div class="main">
      <el-button type="primary" @click="one()">首页</el-button>

    <el-steps :active="active" finish-status="success">
      <el-step
        v-for="(item,index) of stepTitle"
        :key="index"
        :title="item"
        :class="stepClassObj(index)"
        @click.native="handleStep(index)"
      />
    </el-steps>
    <!-- <keep-alive>
     <router-view v-if="$route.meta.keepAlive" @handleNextStep="handleNextStep()"  @handleLastStep="handleLastStep()" />
     </keep-alive> -->
     //router-view 子组件发生变化导致父组件发生改变
     <router-view  @handleNextStep="handleNextStep()"  @handleLastStep="handleLastStep()" />

   
  </div>
</template>

<script>


export default {
  name: 'Step',

  data() {
    return {
      // 步骤
      active: 0,
      // 已选步骤
      stepSuc: [0],
      // 步骤标题
      stepTitle: ['步骤一', '步骤二', '步骤三', '步骤四']
    }
  },
  computed: {
    // 动态给步骤加样式
    stepClassObj() {
      return (val) => {
        return {
          stepSuc: this.stepSuc.includes(val),
          stepErr: !this.stepSuc.includes(val)
        }
      }
    },
  },
  methods: {
      one(){
 this.$router.push("/report/companyBackground");
      },
    // 点击步骤条
    handleStep(val) {console.log(val,'点击步骤条');
      if (this.stepSuc.includes(val) === true) {
        this.active = val;
     if (this.active==0) {
          this.$router.push("/ceshi/stepcontent1");
      }else if (this.active==1) {
          this.$router.push("/ceshi/stepcontent2");
      } else if(this.active==2){
          this.$router.push("/ceshi/stepcontent3");
      } else if(this.active==3){
          this.$router.push("/ceshi/stepcontent4");
      }
      }
    },
    // 组件点击上一步
    handleLastStep() {   console.log(this.active,"上一步");
      if (--this.active === 0) { 
          this.active = 0   
      }
       if (this.active==0) {
          this.$router.push("/ceshi/stepcontent1");
      }else if (this.active==1) {
          this.$router.push("/ceshi/stepcontent2");
      } else if(this.active==2){
          this.$router.push("/ceshi/stepcontent3");
      } else if(this.active==3){
          this.$router.push("/ceshi/stepcontent4");
      }
    },
    // 组件点击下一步
    handleNextStep() {console.log(this.active,'下一步');
      this.stepSuc.push(++this.active)
      if (this.active==0) {
          this.$router.push("/ceshi/stepcontent1");
      } else if (this.active==1) {
          this.$router.push("/ceshi/stepcontent2");
      } else if(this.active==2){
          this.$router.push("/ceshi/stepcontent3");
      } else if(this.active==3){
          this.$router.push("/ceshi/stepcontent4");
      }
    },
    //监听路径的改变来让步骤条改变
       dd(){
        console.log(this.$route.path,'路径');
        if (this.$route.path=='/ceshi/stepcontent4') {
            this.active=3
            this.stepSuc=[0,1,2,3]
        } else {
            console.log("错误");
        }
    }
  },
  mounted(){
     this.dd()
  }
}
</script>

<style lang="scss" scoped>
.main{
  padding: 18px 12px 16px;
 background-color: rgb(38, 38, 63);
}

 .pane {
  margin-top: 18px;
  padding: 18px 12px 16px;
  background-color: #cccccc;
}

.stepSuc :hover{
  cursor: pointer;
}

.stepErr :hover{
  cursor: not-allowed;
}
</style>

接下来配置路由
router里的index.js

 {
    name: '91',
    path: '/ceshi/91',
    //重定向页面
    redirect: '/ceshi/stepcontent1',
    // meta: { keepAlive: true },
    component: () => import('@/components/ceshi/91.vue'),
    children: [
      {
        path: '/ceshi/stepcontent1',
        name: 'step-content1',
        // meta: { keepAlive: false },
        component: () => import(/* webpackChunkName: "about" */ '../components/ceshi/components/step/step-content1.vue')
      },
      {
        path: '/ceshi/stepcontent2',
        name: 'step-content2',
        // meta: { keepAlive: false },
        component: () => import(/* webpackChunkName: "about" */ '../components/ceshi/components/step/step-content2.vue')
      },
      {
        path: '/ceshi/stepcontent3',
        name: 'step-content3',
        // meta: { keepAlive: true },
        component: () => import(/* webpackChunkName: "about" */ '../components/ceshi/components/step/step-content3.vue')
      },
      {
        path: '/ceshi/stepcontent4',
        name: 'step-content4',
        // meta: { keepAlive: false },
        component: () => import(/* webpackChunkName: "about" */ '../components/ceshi/components/step/step-content4.vue')
      },
    ]
  },

接下来就是四个子页面
step-content1.vue

<template>
  <div class="pane">
    <h1>第一个步骤内容</h1>
    <div>
      <el-table :data="tableData" border stripe>
        <el-table-column label="用户姓名" prop="userName" />
        <el-table-column label="类型值">
          <template slot-scope="scope">{{ typeDesc(scope.row.typeCode) }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;margin-top:18px;">
      <el-button type="primary" @click="handleNextStep()">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepContent1',
  data() {
    return {
      tableData: [
        { userName: '张三', typeCode: '1' },
        { userName: '李四', typeCode: '2' }
      ],
      typeOption: [
        { label: '类型一', value: '1' },
        { label: '类型二', value: '2' }
      ]
    }
  },
  computed: {
    typeDesc() {
      return (val) => {
        const target = this.typeOption.find(i => i.value === val)
        return target ? target.label : ''
      }
    }
  },
  methods: {
    // 点击下一步
    handleNextStep() {
    //调用父组件的方法
      this.$emit('handleNextStep')
    }
  }
}
</script>

<style scoped>

</style>

step-content2.vue

<template>
  <div class="pane">
    <h1>第二个步骤内容</h1>
    <div style="text-align:center;margin-top:18px;">
      <el-button type="primary" @click="handleLastStep()">上一步</el-button>
      <el-button type="primary" @click="handleNextStep()">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepContent2',
  data() {
    return {

    }
  },
  methods: {
    // 点击上一步
    handleLastStep() {
      this.$emit('handleLastStep')
    },
    // 点击下一步
    handleNextStep() {
      this.$emit('handleNextStep')
    }
  }
}
</script>

<style scoped>

</style>

剩下的两个无非就是复制粘贴，改一下名称就好