VueRouter-在嵌套路由的过程中子路由不显示的问题

VueRouter-在嵌套路由的过程中子路由不显示的问题

• 代码场景

##预期的是下面的展示：
新闻和消息为嵌套的路由，当点击新闻的时候，会展示新闻列表，当点击消息的时候，会出现消息列表

• 错误场景
  但是当我运行的时候，点击新闻按钮，不显示新闻子路由的内容，点击消息按钮，也不显示消息子路由的内容，代码也没有报错
  
  

• 解决方案

1.父组件中没有写“router-view"标签，在父组件中补上即可：

2.在配置子路由router的过程中子路由的path不用加"/"

 {
    path: '/home',
    // name: 'Home',
    component: Home,
  //  路由懒加载②第二种方式：
  //   component: () => import('../components/Home')
    children:[
      {
        path:'',
        redirect:'news'
      },
      {
        path:'news',
        //这里的path不用加'/',源码内部会自动拼接上，如果加上'/'会报错
        component:HomeNews
      },{
        path:'message',
        component:HomeMessage
      }
    ]
  }

3.观察在父组件中定义子组件的时候的单词有没有拼写错误，比如component多加了一个”s“，我自己犯的就是这个错误，最马虎的错误。。。还查找了半天博客。。。。

上面的代码就是我错误的时候的写法，看似平平无奇，一切都很正常，代码也没有报错，但是千万要注意，定义组件的时候component后面没有”s“！！！！不要加上”s“！！！直接“component:HomeNews”这样定义就没问题了。