vue2.9.6默认路由指定跳转

源码：

router/index.js里面输入

import Vue from 'vue'
import Router from 'vue-router'
import index from '../pages/index.vue'
import My from '../pages/my.vue'
import rankingList from '../pages/rankingList .vue'
import footers from '../pages/footers.vue'
import $ from 'jquery'


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'footers',
      component: footers,
      redirect:'index', //默认跳转
      children:[
        {
          path:'index',
          name:'index',
          component:index
        },
        {
          path: 'my',
          name:'my',
          component: My
        }
      ]
    },

    {
      path:'/rankingList',
      component:rankingList
    }
  ]
})

父组件：footers.vue

<template>
  <div>
   <router-view></router-view>
    <div class="fixation">
      <footer>
        <router-link :to="{path:'index'}">
          <div class="index-my" v-on:click="clickIndex">
            <img :src='indexUrl'>
            <span>首页</span>
          </div>
        </router-link>
        <div>
          <img src="../assets/images/add.png" alt="增加">
        </div>
        <router-link :to="{path:'my'}">
          <div class="index-my" v-on:click="clickMy">
            <img :src="myUrl" alt="我的图片">
            <span>我的</span>
          </div>
        </router-link>
      </footer>
    </div>
  </div>
</template>

<script>
  import index from './index.vue'
  import my from './my.vue'
  export default{
    data(){
      return {
        indexUrl: require('../assets/images/home-y.png'),
        myUrl: require('../assets/images/my-n.png'),
        imgStatus: true
      }
    },
    components: {
      index,
      my
    },
    methods: {
      clickIndex: function () {
        if (this.imgStatus) {
          this.indexUrl = require('../assets/images/home-y.png'),
            this.myUrl = require('../assets/images/my-n.png')

        } else {
          this.indexUrl = require('../assets/images/home-y.png'),
            this.myUrl = require('../assets/images/my-n.png')

        }
      },
      clickMy: function () {
        if (this.imgStatus) {
          this.indexUrl = require('../assets/images/home-n.png'),
            this.myUrl = require('../assets/images/my-y.png')
        } else {
          this.indexUrl = require('../assets/images/home-n.png'),
            this.myUrl = require('../assets/images/my-y.png')
        }
        this.imgStatus = !this.imgStatus
      }
    }
  }
</script>

<style scoped>
  footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /*position: fixed;*/
  }

  .index-my {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .3rem;
    color: #3C83DD;
  }

  .index-my img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .fixation {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: white;
  }
</style>