关于子路由组件的渲染问题

最近没事干,虚度光阴中......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组件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,637评论 25 708
  • 书名:《高效能人士的7个习惯》 进度:P566-581 新的概念: 熵 “熵” 原是物理学概念,”意思是任何事物自...
    海鸥老师阅读 186评论 0 0
  • 丘陵上仍旧满是茶树 天空中还是布满白云 打着赤脚,舔着冰棍的小孩 换成了拄着拐杖,颤颤巍巍的老人 日出而作,日落而...
    rec阿尔法阅读 276评论 0 2
  • 我知道我很笨,笨到自己都会嫌弃自己。可我也很聪明,我知道我爱你,无比笃定的知道。 我不会画画,不会写漂亮的字,没有...
    小胖虫子阅读 645评论 0 0
  • 还好吧!刚烫发丑三天。 得修两次才会自然 当然,永远不会如卷棒一次性卷出来的感觉 ……… 我不急,等我双腿长得和心...
    旧城xu阅读 303评论 0 0