嵌套路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入组件
import My from './my'
import Singer from './singer'
import Recommend from './recommend'
import userinfo from './userinfo'

let router = new VueRouter({
  routes:[
    {
      path:'/recommend',
      component:Recommend
    },
    {
      path:'/singer',
      component:Singer
    },
    {
      path:'/my',
      component:My,
      children:[
        {
          path:'userinfo',
          component:userinfo
        }
      ]
    },
    {
      path:'/',
      redirect:'/my'
    }
  ]
})

export default router

如果是在子组件中的嵌套路由，记得添加 <router-view></router-view>

<template>
  <div>
    这里是歌手
    <ul>
      <li 
      @click="goinfo"
      v-for="(item,index) in 10" :key="index">{{item}}</li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
methods:{
  goinfo(){
    this.$router.push('/singer/detail')
    
  }
}
}
</script>

这里要注意的是，嵌套路由的子路由不要写“ / ”

写路由的最后不要忘记抛出 export default router