vue-router使用路由嵌套，二级路由

一、嵌套路由的使用场景：

在选项卡中，顶部有多个导航栏，中间的主体显示的是内容；这个时候，整个页面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，就是中间的主体显示的是内容就是页面路由下的子路由，这就是路由中嵌套路由。

二、使用方法：

1.在router下的index.js配置路由映射，使用children数组来定义子路由

{
    
    
    path: '/home',
    component: Home,
    meta:{
    
    
      title:'首页'
    },
    // 路由嵌套
    children:[
      {
    
    
        path: 'news',
        component:HomeNews
      },
      {
    
    
        path:'message',
        component: HomeMessage
      },
    ]
  }

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

2.在主路由组件上配置router-link和router-view

 <template>
 <div>
   <h2>我是home</h2>
   <p>我是内容</p>
   <!-- 路由嵌套 -->
   <router-link to='/home/news'>新闻</router-link>
   <router-link to='/home/message'>消息</router-link>
   <router-view></router-view>
 </div>
</template>

显示如下: