vue-router跳转页面时，路径变了，但是页面显示空白是为什么

Question

现在要点击页面上的下一步按钮，进行到第二步，此时会跳转到step2.vue页面，如图:

代码下如：

路由配置:

import activePublish from '../page/activePublish/index.vue'
import step1 from '../page/activePublish/step1.vue'
import step2 from '../page/activePublish/step2.vue'
//import step3 from '../page/activePublish/step3.vue'
//import step4 from '../page/activePublish/step4.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/activePublish',
      name: 'activePublish',
      component: activePublish,
      children:[
        { path: '', component: step1 },
        { path: 'step1', component: step1 },
        { path: 'step2', component: step2 }
      ]
    }
  ]
})

活动发布的index.vue代码:

<template>
  <div class="activePublish">
    <!-- element步骤组件 -->
    <el-steps :space="200" :active="step" class="step">
      <el-step title="活动信息" index="1" description=""></el-step>
      <el-step title="报名签到" index="2" description=""></el-step>
      <el-step title="分享设置" index="3" description=""></el-step>
      <el-step title="个性设置" index="4" description=""></el-step>
    </el-steps>

    <router-view class="view"></router-view>

    <div class="but-group">
      <!--<el-button @click="preview">预览</el-button>-->
      <el-button v-show="preStep"  @click="pre">上一步</el-button>
      <el-button type="primary" v-show="nextStep" @click="next">下一步</el-button>
      <el-button type="primary" v-show="isPublish" @click="publish">发布活动</el-button>
    </div>

  </div>

</template>


<style>

</style>


<script>
  import Vue from 'vue'
  import $ from "jquery";
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'

  Vue.use(Element)

  export default{
    data(){
      return {
        step: 1,
        preStep: false,
        nextStep: true,
        isPublish: false,
        isRouter: false
      }
    },
    methods:{
//      上一步
      pre(){
        this.$router.go(-1);
        this.step--;
        this.goStep(this.step);
      },

//      下一步
      next(){
        this.$router.push('/activePublic/step'+(this.step+1));
        var _this = this;
        setTimeout(function () {
          if(_this.isRouter){
            _this.step++;
            _this.goStep(_this.step);
          }
        })
      },

//      发布
      publish() {

      },

      goStep(n) {
        switch (n){
          case 1:
            this.preStep = false;
            this.nextStep = true;
            this.isPublish = false;
            break;
          case 2:
            this.preStep = true;
            this.nextStep = true;
            this.isPublish = false;
            break;
          case 3:
            this.preStep = true;
            this.nextStep = true;
            this.isPublish = false;
            break;
          case 4:
            this.preStep = true;
            this.nextStep = false;
            this.isPublish = true;
            break;
        }
      }
    },

    watch:{
      '$route': function (to,from) {
        this.isRouter = true;
      }
    }
  }
</script>

当我点击下一步的时候，页面就变成空白的样子了，如图：

找不到原因是什么，想问下大家有没有遇到过这样的情况，到底是什么原因会导致这种情况。

Answer 1

路由跳转的时候改成下面这样试下：

//      下一步
      next(){
        this.$router.push({path:'/activePublic/step'+(this.step+1)});
      }

Answer 2

没有报错么

Answer 3

大哥，你是哪个地方写错了，我也遇到了差不多的问题，也是某个子页面在router-view里渲染空白，找了半天找不到问题出在哪里。