Vue中的嵌套路由

//router中的js你可以这样写
// 定义一个数组
const routes = [
  {
    path: '/',
    redirect: "/home",
  },{
    path: '/home',
    name: 'home',
    component: Home,
    redirect: "/home/index",
    children:[{
      path: "index",
      name: 'home',
      component: () => import('../views/Home/children/Index.vue') //按需引入组件
    },{
      path: "showresult",
      name: 'home',
      component: () => import('../views/Home/children/Showresult.vue') //按需引入组件
    },{
      path: "infosharing",
      name: 'home',
      component: () => import('../views/Home/children/Infosharing.vue') //按需引入组件
    },{
      path: "openability",
      name: 'home',
      component: () => import('../views/Home/children/Openability.vue') //按需引入组件
    },{
      path: "dataapplication",
      name: 'home',
      component: () => import('../views/Home/children/Dataapplication.vue') //按需引入组件
    }]
  }]
//然后在header中你可以这样写
<div>
	<ul>
      <li>
          <router-link to="index">首页</router-link>
        </li>
        <li>
          <router-link to="showresult">成果展示</router-link>
        </li>
        <li>
          <router-link to="openability">能力开放</router-link>
        </li>
        <li>
          <router-link to="dataapplication">数据应用</router-link>
        </li>
        <li>
          <router-link to="infosharing">信息共享</router-link>
        </li>
      </ul>
	//记得加个站位符	
	<router-view></router-view>
</div>
//因为就是演示一下没有用v-for你可以用v-for循坏这样你可以冬天添加一个类名可以添加选择动态效果
//在说一下我加动态类名都是怎么加
<div class="section-1">
    <ul class="infoimg">
        <li :class='currentindex==index?"current":""' v-for="(item,index) in DataApply" :key='item.id'>
            <img :src="item.imgpath" alt="">
         </li>
	</ul>
    <ul class="title">
        <li @mouseover='change(index)' :class='currentIndex==index?"active":""' v-for="(item,index) in DataApply" 							:key='item.id'>
            <img :src="item.titleimg" alt="">
         </li>
    </ul>
</div>
//data中
// 当前按钮
currentIndex: null,
// 当前图片
currentindex: 0,
        
methods: {
  change(index){
      this.currentIndex = index;
      this.currentindex = index;
  }
},