vue多层嵌套子路由不显示
组件Weekends的路由为“/schedule/weekends”,要在父组件中渲染需要配置router-link(访问链接,相当于html中的。
·
主要原因在于路径配置错误,多层嵌套子路由在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>
更多推荐
已为社区贡献1条内容
所有评论(0)