主要原因在于路径配置错误,多层嵌套子路由在router中配置时,其路径为“父组件路径+子组件路径”,例如在下例中:
const routes = [{path: "/",name: "Home",component: Home,children:[{path:'schedule/',name:'Schedule',component:() => import('@/views/schedule/Schedule.vue')children:[{path:'daily',name:'Daily',component:() => import('@/views/schedule/components/Daily.vue')},{path:'weekends',name:'Weekends',component:() => import('@/views/schedule/components/Weekends.vue')}]}]}
]
组件Weekends的路由为“/schedule/weekends”,要在父组件中渲染需要配置router-link(访问链接,相当于html中的标签)及router-view(渲染子组件中的内容):
<div><router-link to="/schedule/daily">daily</router-link></div><div><router-link to="/schedule/weekends">weekends</router-link></div><router-view></router-view>