最近没事干,虚度光阴中......leader让看看Antv,搭建了脚手架之后,发现在二级路由中没有显示出子路由组件:
{
path: '/about',
component: about,
redirect: {name: 'Work'},
children: [
{
path: 'work',
name: 'Work',
component: work
},
{
path: 'study',
name: 'Study',
component: study
},
{
path: 'hobby',
name: 'Hobby',
component: hobby
}
]
}
好久没有写项目代码了,好懵,为什么work组件显示不出来?
翻翻之前的项目代码,发现在子路由的父路由中,需要有<router-view></router-view>来提供给子路由进行组件渲染的位置。大概意思就是,在App组件中有<router-view></router-view>告诉组件渲染的位置,这个位置在/about/work中已经渲染了about组件,没有位置能渲染work组件了,所以要在work的父路由(about组件中)另外再提供<router-view></router-view>来渲染work组件。
项目代码中一般是比如在path为"/about"的情况下渲染Layout组件,Layout一般是布局性质的组件,在Layout中会有router-view供后面的子路由进行子路由组件渲染。
这里我就偷个懒,直接在about.vue中加一句<router-view></router-view>,页面中就渲染出了about组件和work组件。