vue-router跳轉頁面時，路徑變了，但是頁面顯示空白是為什么

現在要點擊頁面上的下一步按鈕，進行到第二步，此時會跳轉到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 }
      ]
    }
  ]
})

活動發(fā)布的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">發(fā)布活動</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);
          }
        })
      },

//      發(fā)布
      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>

當我點擊下一步的時候，頁面就變成空白的樣子了，如圖：

找不到原因是什么，想問下大家有沒有遇到過這樣的情況，到底是什么原因會導致這種情況。